React-native-example
React-native-example copied to clipboard
Published
20 hours ago •
chenbin92
chenbin92
Learning react native
React Native Notes (iOS)
一：学习笔记
Date：2016-02-21
- 浅谈前端移动开发 (Ionic 与 React Native)
- React Native 新手入门篇
- 添加设置 iOS App Icon 和 Launch Image
- React Native 控件之 Navigator 组件详解以及实例
- React Native 之 LandingPage 示例演示
- React Naitve之 Flexbox 布局
- React Native 之 Movies 示例能学到什么
- 使用 ListView 组件实现类似iPhone通讯录效果
- Fetch API 的使用(待续)
- React 生命周期(待续)
- 搜索功能(待续)
- 下拉刷新功能(待续)
- 持续更新中...
二： 环境搭建
工欲善其事，必先利其器。整个示例代码都是以Mac OS X系统为基础的；
React Native主要依赖的环境：
- Mac OS X操作系统
- 推荐使用Xcode7.1或者更高版本
- 安装Node.js 5.0或者最新版本
- 建议使用Homebrew安装： watchman和flow
项目依赖的版本
$ node -v => v5.1.1
$ react-native cli -v => react-native-cli: 0.1.10
=> react-native: 0.20.0
安装 node
推荐使用 nvm 管理你的 Node.js 版本
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash
$ source ~/.nvm/nvm.sh
$ nvm install 5.1.1
$ nvm use 5.1.1
常用 nvm 命令
$ nvm use <version> // 切换版本
$ nvm ls-remote // 查看远程 Node.js 的版本
$ nvm ls // 查看本地安装的 Node.js 的版本
安装 react-native
在安装 react-native 之前，需要确保 Node.js 已经安装且在环境变量中；需要确保 Xcode 已经安装且最好是7.1 或者更高版本
1. 通过Homebrew安装watchman和flow：
$ brew install watchman
$ brew install flow
2. 安装完成后，我们就可以通过 npm 安装react-native-cli 的命令行工具：
$ npm install -g react-native-cli // -g 表示全局安装
注：如果安装不成功或者很慢，是因为react-native命令是从npm官网源安装，我们可以改用淘宝镜像源来安装
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist
或者如果你已经安装cnpm：
// 在 /usr/local/lib/node_modules/react-cli/index.js中找到下面一行代码
run('npm install --save react-bative', function(e) {
修改为
run('cnpm install --save react-bative', function(e) {
改用 cnpm 重新安装 react-native-cli，你会发现是如此的快...
$ cnpm install -g react-native-cli // -g 表示全局安装
3. 检查是否安装正确：
$ brew -v => Homebrew 0.9.5
$ npm -v => 3.3.12
$ cnpm -b => 3.3.12
$ node -v => v5.1.1
$ nvm --version => 0.17.3
$ react-native cli -v => react-native-cli: 0.1.10
=> react-native: 0.20.0
Clone Repo
$ git clone [email protected]:chenbin92/React-native-example.git
$ cd React-native-example
安装依赖
使用 npm 安装项目的依赖: npm
$ npm install
node_modules- contains the npm packages for the tools we need
在 iOS simulator运行应用
$ npm start
$ react-native run-ios
在设备上运行应用
- 打开项目的 AppDelegate.m 文件，找到`jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];```
- 将 localhost 修改为你的
ip地址，如jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.101:8081/index.ios.bundle"]; - 重新编译即可
调试
- 在iOS设备上晃动即可自动弹出开发菜单
- 在iOS simulator 中按下
commond + D即可
- Enable Live Reload: 开启js代码自动刷新
- Reload: 刷新（command + R）
- Debug in Chrome： 在chrome上调试js代码
- Show Inspector： 查看元素模型
更新 React Native 项目依赖包版本
在升级之前，我们可以运行 npm infi react-native 查看react-native的版本信息：
$ npm update -g react-native-cli // 更新本地 react-native-cli的版本
$ npm install --save [email protected] // @后面跟需要升级的版本号
$ react-native upgrade
降级 React Native 项目依赖包版本 (与更新一样)
$ npm install --save [email protected] // @后面跟需要升级的版本号
$ react-native upgrade
chenbin92