RN 环境配置理解（一)

第一步：把工程跑起来。
React Native 中文网 / 搭建开发环境

创建并跑起来一个 RN 工程

创建一个独立的完整的 RN 项目，通过 react-native init。

配置 NodeJS 环境

• 方式1 （推荐）

  brew install node
  

• 方式2

  手动安装 https://nodejs.org/en/
  

下载 react-native 命令行工具 react-native-cli

1. 设置 npm 源
   设置源的目的是：Node 远程包都是在国外服务器上，国内无法访问。淘宝源是每隔一定时期拉取最新的源内容到国内服务器上。使用淘宝源，我们就可以快速下载和更新 Node 包了。

   npm install nrm -g
   nrm add csdnnpm https://registry.npmjs.org/
   // nrm 是个管理 npm 源的工具
   // 我们这里用 https://registry.npmjs.org/，不用淘宝源 https://registry.npm.taobao.org
   

2. 下载 react-native-cli

    npm install react-native-cli -g
   

   note:

   • npm 是 NodeJS 包管理工具，brew install node 后，npm 也会一并下载。
   • -g 是全局安装的意思，在任何位置都可以使用 react-native-cli 工具链。
   • react-native-cli 是包名称，使用时用 react-native。react-native-cli --help，react-native --help。前者会报 command not found。

创建 RN 工程

1. init project

   react-native init <ProjectName>
   

   
   

2. run project

   • 方式1
     打开 /ios/csdnProject.xcodeproj 工程，run。

   • 方式2

     cd /csdnProject
     // 进入根目录
     react-native run-ios
     // run-ios 主要做了以下几个事情：Found Xcode project csdnProject.xcodeproj，Building using "xcodebuild -project csdnProject.xcodeproj -configuration Debug -scheme csdnProject -destination id=F33AF7C6-CB0F-42BE-816D-ECFE5A857139 -derivedDataPath build"
     

     run-ios 做了以下几个事：
     Found Xcode project csdnProject.xcodeproj；

     Building using “xcodebuild -project csdnProject.xcodeproj -configuration Debug -scheme csdnProject -destination id=F33AF7C6-CB0F-42BE-816D-ECFE5A857139 -derivedDataPath build”；

     Installing build/Build/Products/Debug-iphonesimulator/csdnProject.app

     Launching org.reactjs.native.example.csdnProject

note： 在项目根目录下 react-native --help，和其他位置下 react-native --help 打印信息不一致。这里我们前者记为 r-n-1，后者记为 r-n-2。r-n-2 是我们前面通过 npm 安装的 module。r-n-1 是每个工程中嵌入到 react-native 文件夹下的用来访问 CLI 的脚本。r-n-1 的使用在其他文章给出。

结果

程序跑起来了，我们第一步算是完成了。以后再深入。