001_ReactNative环境搭建

基本概念(问渠那得清如许，为有源头活水来。 双手奉上RN官网)

react
|—react.js(web端js框架,react概念由此产生)
|—reactNative(react衍生)

---

环境配置

• iOS仅支持Mac,Android支持Mac & Windows & Linux
• 职业开发建议选购MBP(Macbook Pro, 建议在第一年质保快结束时购买care+,否则维修成本较高)

iOS + Mac

1. 依赖于Xcode,node.js, ReactNative commandLine, watchman

* 安装Xcode
* 安装Homebrew(macOS包管理工具) :   `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
* 安装node:  brew install node
* 安装watchman: brew install watchman
* 安装RN命令行(cli指command line interface) :  sudo npm install -g react-native-cli

2. 示例项目:

* 进入要创建项目的目录:  cd  [parentDir]
* 创建项目,这个过程会下载一系列依赖文件,耗时较长(20min+,因为防火长城的问题,唉): react-native  init  [projectName]    
        曲线解决方案,用淘宝的镜像.  
        编辑 ~/.npmrc 加入下面内容
        registry = https://registry.npm.taobao.org 
* 进入项目文件中: cd  [projectName]  
* 运行项目:  react-native run-ios

3. 编辑项目:

* 在index.ios.js中编辑
* 选中模拟器时cmd+R重载应用(如果无效,需要在hardware->keyboard中勾选Connect Hardware Keyboard)
 * 选中模拟器时cmd+D显示开发菜单
          开发菜单中的项目说明
          Reload: 重新加载
          Debug JS Remotely : 在浏览器里调试代码
          Disable Live Reload : 是否在文件修改完成时自动重载
          Start Systrace: 监控应用在一段时间内的指标信息
          Enable Hot Reloading : 热更新.保留应用原有状态的情况下重载.
          Show Inspector : 貌似是结合浏览器查看调试的(待确认)
          Show perf(performance) Monitor: 显示性能监控

---

Android+Mac(已可用,尚有部分槽点未处理完)

1. 依赖于Android studio,node.js, ReactNative commandLine, watchman

* Android studio自己下载安装,其他同上
      * 选择custom安装
      * 勾选Performance和Android Virtual Device
      * 在Android Studio的启动欢迎界面中选择Configure | SDK Manager
      * 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
      * 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。（必须是这个版本）
 * ANDROID_HOME环境变量配置
    * 使用vim(新建)编辑`~/.bashrc`文件,加入以下内容
          export ANDROID_HOME=~/Library/Android/sdk
          export PATH=${PATH}:${ANDROID_HOME}/tools

2. 示例项目:

* 与ios基本相同,只是运行时使用 react-native run-android 命令,但运行前要先打开一个Android虚拟机
    * 命令运行完后发现安装成功了,但没有自动运行,需要手动点击进入
    * 刷新时需要使用cmd+M调出菜单手动刷新

3. 编辑项目:

* 在index.android.js中编辑

---

iOS + Windows(不支持)

---

Android + Windows(待补充)

---

iOS + Linux(不支持)

---

Android + Linux(待补充)