REACT NATIVE 安装与踩坑记录

React Native 可以用于构建原生 APP，并提高多平台开发的开发效率，Lean once，write anywhere

官方文档：http://wiki.jikexueyuan.com/project/react-native/

很有用的参考，并且一直在更新，点击这里

注：本文代码以安卓应用为主

准备工作

升级你的 node.js 版本到4.0以上，这是最低的版本要求。
```
 node -v
```
为了方便切换 npm 源，需要安装 nrm 模块
```
 npm install -g nrm
```
安装 JDK，并将 JDK 的 bin 目录加入到系统 PATH 环境变量中。增加JAVA_HOME参数，路径到jdk根目录
- 下载地址
安装 Android SDK，进入 SDKManager, 确保项目安装以下工具，并将 Android SDK 的 bin 目录加入到系统的 PATH 环境变量中。增加ANDROID_HOME参数，路径到android_sdk根目录
- Tools/Android SDK Tools (24.3.3)
- Tools/Android SDK Platform-tools (22)
- Tools/Android SDK Build-tools (23.0.1)
- Android 6.0 (API 23)/ SDK Platform (1)
- Extras/Android Suppore Library (23.0.1)
安装 React Native命令行工具
```
 npm install -g react-native-cli
```

创建项目

进入工作目录，然后运行命令，项目名暂定为 HelloWorld
```
  react-native init HelloWorld
```

安装过程中，可能会出现需要安装 python 与 MSBuild 的情况，可以不用管他，有强迫症的朋友也可以按照提示进行安装，注意环境变量的配置

此处需要等待几分钟，等待npm的模块下载和项目创建。
进入HelloWorld文件夹运行packager
```
  react-native start
```
可以访问 http://localhost:8081/index.android.bundle?platform=android 验证打包后的脚本如果遇到ERROR Watcher took too long to load的报错，请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js 的参数 MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）
保持packager开启，并运行以下命令。
```
  cd HelloWorld
  react-native run-android
```
注意：这里会有一堆的坑

出现 SDK location not found ：需要将 SDK 的路径配置到环境变量 ANDROID_HOME 中

出现 No connected devices! ：需要开启 AVD 模拟器

出现 com.android.ddmlib.ShellCommandUnresponsive Exception : 安装 APK 超时导致的问题，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。

出现 Unable to download JS bundle : 抖动或者按下 Menu 键，选择 Dev Settings，输入本机的IP地址（局域网IP，非127.0.0.1，默认端口号为8081），然后按下返回，并Reload JS即可

出现 Unable to connect with remote debugger : 再次运行下 react-native start 的命令，即可
上述报错中，由于根据Facebook的技术人员回应，上面的问题是安卓模拟器的工具问题，暂时无法修复，建议安装 Genymotion。
有条件的可以安装 Genymotion，可能会遇到无法登入的问题，实在不行，可以安装 BlueStacks 不过要小心他推送的广告与垃圾应用。

笔记

尝试修改 index.android.js
- eg：将文字Welcome to React Native!修改为Hello World！，并重新 Reload JS，即可将修改刷新到应用中。
关于 React-Native 与 React 的区别
1. 不使用类似 DIV 和 SECTION 等的块元素，改用 React 的 View组件，它会映射到 IOS 组件的 UIView
```
 <View>
 	<View></View>
 </View>
```
2. 所有的文本都应该封装到 Text 组件里。
3. 没有样式表 - 你的所有的样式都是被写成 JavaScript 对象的。
4. 不必要担心浏览器的兼容问题，ES6 harmony 是在盒子之外受到支持的，flexBox 也是一样
Chrome调试
1. 打开 debugger-ui 界面
2. 安装 Chrome 插件：React Developer Tools
3. 打开安卓模拟器，打开 Menu，选择 Debug JS
4. 在代码中需要 debug 的地方使用 console.log
5. 打开 debugger-ui, 按下 F12 进入开发者模式

如果显示 Status: Waiting, press ?R in simulator to reload and connect. 则重新在模拟器中 Reload JS

React-Native的组件，具体组件的属性参考 docs
- StyleSheet组件：声明样式，并封装为 Javascript 对象
  - 注：放在文件末尾声明，避免重复渲染，属性名与值和 WEB 常用相同
  - 支持样式的组件有以下几个
    - View
    - Image
    - Text
    - Flex
    - Transform
- 以下不累述，具体参考文档。
导航器 Navigator 与 NavigatorIOS
- 用于管理场景中导航，类似 H5 的 historyAPI 的作用
- 区别在于 Navigator 兼容 iOS 与 Android，而NavigatorIOS仅支持 iOS
文件命名方式
- React-Native会当前平台自动加载后缀名带有.ios.或.android.的文件
- 举例:
  - BigButton.ios.js 与 BigButton.android.js
  - 代码中加载只需要写 import BigButton from './BigButton' 即可
第三方模块：https://js.coach/
已知的问题：http://reactnative.cn/docs/known-issues.html#content

关于第三方模块，需要注意对平台的支持，很多第三方可能仅支持IOS，虽然标注了同时支持安卓，例如:Swiper，但实际测试结构是BUG有一大堆解决方案：动手能力强的直接去修改第三方的代码，或者去 github 上对问题进行提交，以期望作者进行修复。

代码相关

关于IOS与Android的差异性
- 验证工具：https://rnplay.org/apps/fgncag
关于TextInput
1. border属性相关设置，在安卓下是无法起作用的，IOS可以正常支持圆角与框的属性设置
  - 相关连接：facebook/react-native#4619
2. 在安卓下，默认会有下划线，使用underlineColorAndroid = "transparent"可以取消此设置
关于Navigator
1. initialRoute参数，如果提供的是一个返回是 object 的方法名，会出现 Waring 级别警告，但不影响功能
2. renderScene参数，如果提供的方法中，使用 this.setState() 会造成 APP 崩溃，即使你已经 bind(this)

打包相关

IOS 打包
- 命令：react-native bundle
Android 打包：
- 生成签名：keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
- 修改android/gradle.properties文件，增加如下
  - MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
  - MYAPP_RELEASE_KEY_ALIAS=my-key-alias
  - MYAPP_RELEASE_STORE_PASSWORD=xx
  - MYAPP_RELEASE_KEY_PASSWORD=xx
- 修改android/app/build.gradle文件中的签名配置
```
  android {
      signingConfigs {
          release {
              storeFile file(MYAPP_RELEASE_STORE_FILE)
              storePassword MYAPP_RELEASE_STORE_PASSWORD
              keyAlias MYAPP_RELEASE_KEY_ALIAS
              keyPassword MYAPP_RELEASE_KEY_PASSWORD
          }
      }
      buildTypes {
          release {
            ...
            signingConfig signingConfigs.release
          }
      }
  }
```
- 进入android运行命令
  - gradlew assembleRelease
  - gradlew installRelease

niklaus0823/demo-react-native

REACT NATIVE 安装与踩坑记录

准备工作

创建项目

笔记

代码相关

打包相关