随着Facebook开源ReactNative,目前越来越多的公司开始在项目中引入此开源框架,所以现在也加入到学习中来。
一 .环境配置
在mac上搭建React环境需要下面这些工具
Android Studio, node.js, the React Native command line tools, and Watchman.
首先来安装 node 和Watchman
这里我是通过 Homebrew来安装的,安装很简单打开mac的终端将
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
这段粘贴到命令行中即可,等它安装好了,就可以安装node来
具体命令为
brew install node
同理Watchman也是同样安装命令为
brew install watchman
安装好了以后就开始安装 React Native command line tools
在这之前已经安装了node了,所以在这通node npm来安装具体命令如下:
npm install -g react-native-cli
如果安装失败,提示权限错误这时可以输入下面命令
sudo npm install -g react-native-cli
如果的If you get error Cannot find module 'npmlog'
, 这个错误
try this before: curl -0 -L http://npmjs.org/install.sh | sudo sh
.
接下来的话就是android开发环境的搭建我就不一一说了。
但是这个地方要注意的就是最后一定要设置环境变量:ANDROID_HOME,刚开始没设置一直包找不到sdk错误
export ANDROID_HOME=‘你的sdk的路径’
如果上面这些都做完了就可以开始建立reactnative项目了
二 初始化项目
在终端中输入
react-native init AwesomeProject
AwesomeProject为工程名字可以按自己需求去命名。初始化完成后就cd 进入工程根目录cd AwesomeProject
然后启动模拟器,真机的调试在后面介绍。启动后在终端输入react-native run-android ,等待编译完成后就可以在模拟器上看到
如果想对其进行修改 就修改 index.android.js 文件,然后双击R健进行重载,在模拟器上看到更新后的效果就是成功了。效果如下
三.Android 真机调试
第一次在真机上运行直接报错了,bridge configuration isn't available" error ,看官网解决方案如下:
如果是 5.0 或者以上机型,可通过 adb 反向代理端口,将 Mac 端口反向代理到测试机上。
Run adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器,通过react-native start --port [PORT] 启动Debug Server,然后应用安装到测试机上之后,摇动设备,在弹出菜单中选择 Dev Setting > Debug Server host for device,然后填入 Mac 的 IP 地址可以在wifi设置看也可通过ifconfig来看
这样以后就可以在真机上调试了。
如果是想在之前项目基础上引入reactnative 可 参照次文章