WOODONCHAN

React Native 环境搭建

从这一篇开始我们就要真正开始踏上探索React Native之旅了,请大家系好安全带准备发车。

环境配置

  • 首先电脑需要安装Node.js版本为V4.0及其以上版本均可。(可以直接在Node.js官网下载安装包安装即可
  • npm随Node.js会一并安装上去,npm是Node.js的包管理工具

    安装 React Native

  • 通过npm进行安装
    npm install -g react-native-cli

    App开发环境设置

    Android
  • 首先电脑必须配置android环境变量
  • 通过SDK Manager更新安装如下包
    ① Android SDK Build-tools Version 23.0.1
    ② Android 6.0 API 23
    ③ Android Support Repository

iOS

  • XCode 7.0 及其以上即可

初始化项目

现在需要的开发环境我们已经都搭建完成了,那我们就开始初始化一个项目试一试

执行以下命令初始化项目

  • react-native init Test Test为项目名称

注意

由于网络被墙,使用react-native命令行从npm官方源拖代码时会遇到阻碍,需要连接VPN进行操作。不过建议使用另一种方案,就是切换npm仓库源到国内淘宝镜像上。
具体操作如下,执行以下命令即可进行切换
npm config set disturl https://npm.taobao.org/dist
npm config set registry https://registry.npm.taobao.org
切换完成后为了确保成功,可以执行以下命令进行查看
npm config list
当看到如下代码即代表切换成功
disturl = "https://npm.taobao.org/dist"
registry = "https://registry.npm.taobao.org/"

运行项目

运行Android项目

  • 进入项目目录 cd Test
  • 运行Android App react-native run-android首次运行较慢,因为需要从网上下载gradle依赖
  • 运行完毕后可以在模拟器或真机上看到应用自动启动了。
  • 打开项目根目录下index.android.js文件修改几行文字
  • 在Android模拟器中按Menu键或晃动设备会弹出选项框,然后选择Reload JS选项即可刷新App页面,这样就可以看到最新修改的信息了

运行iOS项目

  • 进入项目文件夹
  • 使用XCode打开ios/Test.xcodeproj文件,点击Run进行运行即可
  • 打开项目根目录下index.ios.js文件修改几行文字
  • 在iOS模拟器中按 ⌘-R 即可刷新App页面,这样就可以看到最新修改的信息了

到这里我们环境搭建工作已经完成了,并且成功运行了第一个React Native应用了。