Mac上搭建RN开发环境

安装依赖

在针对特定平台开发环境建立之前,你需要先安装node,watchman,react-native-cli。在Mac上我们可以通过HomeBrew进行相应的安装。

brew install node
brew install watchman
brew install flow
npm install -g react-native-cli

ios 开发环境搭建

对于ios 只需要从app store中安装xcode即可,安装xcode会自动安装ios 模拟器以及一些构建app所需要的工具。通过react-native 命令初始化一个项目然后测试ios开发环境是否成功建立。

react-native init AwesomeProject
cd AwesomeProject

在ios模拟器中启动应用,两种方式:

1. 通过命令行直接唤起模拟器打开app

   react-native run-ios

   执行完该命令,正常情况下,会打开ios模拟器,然后启动应用以供调试。

2. 进入目录AwesomeProject,打开ios目录下的文件AwesomeProject.xcodeproj,如果xcode成功安装,默认会打开xcode。然后直接

android 开发环境搭建

对于android开发环境要稍微复杂一些。

1. 安装安卓模拟器genymotion

   安装完成后需要去官网注册一个账户并激活,后续创建虚拟设备将会用到。

2. 安装virtual box

3. 安装最新版JDK

4. 安装安卓Android Studio

5. 打开sdk manager 安装的Android sdk

   

6. 选择需要安装的内容

   

7. 打开genymotion 创建安卓模拟器

   • 先设置好正确的android sdk路径

     

   • 添加相应的虚拟设备

     

8. 打开对应的虚拟设备测试安卓开发环境是否成功建立

   打开对于的虚拟设备后,在项目根目录执行命令启动应用:

   react-native run-android

   这一步可能发送报错java.io.EOFException: SSL peer shut down incorrectly,解决方案在后面。

   这个时候如果build successfully 则在模拟器上可以看到对于app的页面,如果模拟器上出现如下报错:

   需要设置对应的debug host为当前电脑的ip地址,如下图:

   

环境配置过程报错解决

• 对于安卓开发环境步骤6中运行react-native run-android所报错误解决方法

  下载gradle-2.4-all.zip到本地
  本地启动对于的服务
  修改android/gradle/wrapper下gradle-wrapper.properties文件中的distributionUrl为本地地址,重新执行react-native run-android

参考资料

1. React Native Android（Genymotion） 环境搭建 for mac
2. 学习 React Native for Android：环境搭建
3. Getting Started with Building An App with React Native, Genymotion, and Watchman
4. react native getting started
5. react-native run-android 报错解决
6. React Native For Android初体验