开始使用React Native

642 查看

本文主要简单的搭建一个React Native 工程,而不是植入原生的工程,如果需要植入原生工程,参照官方文档的植入原生应用.如果不如何安装,可直接点击进入查看相关的安装教程.

搭建环境

1. 首先你需要一台搭载OS X的MAC, 因为这是开发iOS应用所必须的。还有一个原因是Facebook的员工都是用mac,所以在mac上的优化要比windows好很多。
2. 安装Homebrew.
3. 安装Node,直接使用brew install node进行安装.
4. 安装Watchman.
5. 另外,可以安装flow来为js代码加上类型检查,那么在命令行中输入brew install flow.
6. 使用appstore下载最新的开发工具Xcode。
译注:如果您选择从第三方网站/镜像下载Xcode,请务必从正规镜像网站下载验证文件Hash以防止类似XcodeGhost的安全风险发生,不要信任论坛、百度空间等分享渠道

快速开始

如果你的电脑有VPN账号,可以直接

 >` $ npm install -g react-native-cli`

react-native-cli是一个终端命令,它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。

 >` $ react-native init AwesomeProject`

这个命令会初始化一个工程、下载React Native的所有源代码和依赖包,最后在AwesomePrjoect/iOS/AwesomeProject.xcodeproj
AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程
.

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.orgnpm
config set disturl https://npm.taobao.org/dist

运行iOS应用

  • 用XCode打开ios/AwesomeProject.xcodeproj
  • 并点击Run按钮。
  • 使用你喜欢的文本编辑器打开index.ios.js
  • 并随便改上几行。
  • 在模拟器中按下⌘-R, 就可以刷新APP并看到你的最新修改!

    Paste_Image.png