React-Native 环境安装及调试（Mac版）

准备工作

安装必要的软件，这里就不详细说了，具体可参考官方文档

• 安装React-Native Cli

  npm install -g create-react-native-app

• Xcode 安装升级到

  8+

• 初始化RN项目

  react-native init rnHelloWord，可能会比较慢，要耐心等到

启动项目

• 进入项目并启动

 cd rnHelloWord
 npm start

image

也可以使用Xcode启动项目，点击ios/AwesomeProject.xcodeproj，再点击右上角的Run即可跑起来。

调试

模拟器调试

项目启动后，点击模拟器command+d

• 选择

Enable Live Reload，监控RN代码的改动（热替换）,可直接修改代码，即可查看最新的修改。

真机调试

PC上的设置

• 手机通过USB连接电脑，在Xcode中选择手机作为目标设备。

image

• 如图填写，并选择：

image

• 同时相关的 Tests target 里同样也要选择使用的开发者账号。

image

这样基本工作就完成了，可以点击Run启动啦～～

手机上设置

• 这时手机上就安装了一个rnHelloWord的app，点击启动可能会弹一个‘不受信任的’提示，怎么办呢？

image

• 不要着急，我们可以在手机上设置-通用-设备管理-添加信任
• 然后就可以正常启动了
• 应用启动后，只需要摇一摇手机可以调出调试菜单，里面具体功能同模拟器一样，这里就不再说明了。

接下来就可以开发了。

image

---

结束语

React-Native运行环境安装难于上青天，安装成功后你离成功就不远了。它的语法相近于React，撸起袖子～～～写代码吧。

更多文章请关注：我的博客