REACT NATIVE 安装与踩坑记录

---

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

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

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

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

准备工作

1. 升级你的 node.js 版本到4.0以上，这是最低的版本要求。

    node -v
   

2. 为了方便切换 npm 源，需要安装 nrm 模块

    npm install -g nrm
   

3. 安装 JDK，并将 JDK 的 bin 目录加入到系统 PATH 环境变量中。增加JAVA_HOME参数，路径到jdk根目录

   • 下载地址

4. 安装 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)

5. 安装 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