在 Android 上开始使用 React Native

2015-12-11

以下内容大部分都是 React Native 官网中 Getting Started 和 Android Setup 的内容。当然也记录了我在这个过程中遇到的一些问题。

准备环境

Mac 用户在已经有 Homebrew 和 Node 4.x 的情况下，以下都比较简单：

      
      
       
       npm install -g react-native-cli
      
      
      
      
       
       brew install watchman
      
      
      
      
       
       brew install flow

如果已经安装过，就运行下面命令更新一下：

1 2	brew update brew upgrade

附 Linux and Windows Support。

先跑个 IOS 的起来试试

1 2	react- native init AwesomeProject cd AwesomeProject

在 Xcode 中打开 ios/AwesomeProject.xcodeproj（或直接运行这个文件），点击左上角的 ▶ 即会打开 Xcode 自带的 Simulator，非常方便。

在 Simulator 中使用快捷键 cmd-d 打开开发菜单，选择 Enable Live Relaod。然后修改 index.ios.js：

      
      
       
       // ...
      
      
      
      
       
       var {
      
      
      
      
       
         AppRegistry,
      
      
       
         StyleSheet,
      
      
       
         Text,
      
      
       
         View,
      
      
       
         SwitchIOS,// add
      
      
      
      
       
       } = React;
      
      
      
      
       
       var AwesomeProject = React.createClass({
      
      
      
      
       
         render: 
       
       function() {
      
      
      
          
       
       return (
      
      
      
            
       
       <View style={styles.container}>
      
      
      
              
       
       <Text style={styles.welcome}>
      
      
      
      
       
                 Welcome to React-Native!
      
      
      
              
       
       </Text>
      
      
      
              
       
       <Text style={styles.instructions}>
      
      
      
      
       
                 To get started,edit index.ios.js
      
      
      
              
       
       </Text>
      
      
      
              
       
       <Text style={styles.instructions}>
      
      
      
      
       
                 Press Cmd+R to reload,{'\n'}
      
      
      
      
       
                 Cmd+D or shake for dev menu
      
      
      
              
       
       </Text>
      
      
      
      
       
               {/* add */}
      
      
      
              
       
       <SwitchIOS />
      
      
      
            
       
       </View>
      
      
      
      
       
           );
      
      
      
      
       
         }
      
      
      
      
       
       });

就能看到 App 的文字底部增加了一个 Switch 按钮。更多的接口可以看 SwitchIOS，当然还有更多的 COMPONENTS 可以使用，这里不再深究。

安装 Android 环境

安装 JDK 的文章一大堆，就不说了。brew 真是个好东西，安装 Android SDK 和 Gradle 也很简单：

1 2	brew install android-sdk brew install gradle

但是添加环境变量这个还是要做的：

      
      
       
       # brew 安装的 android-sdk 和 gradle
      
      
      
      
       
       export ANDROID_HOME=
       
       /usr/local
       
       /opt/android-sdk
      
      
      
      
       
       export GRADLE_HOME=
       
       /usr/local
       
       /opt/gradle

下载工具

在命令行中运行 android 即可打开 Android SDK Manager，按照这里的说明安装：

Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository

注意，Build-tools 必须是 23.0.1，我就是没看清楚选了 24.x 后面一直报错：

1	Build-tools version 23 .0 .1

当然后续 react-native-cli 升级可能会更新 Build-tools，反正如果看到这个错误，就安装对应的 Build-tools 就好啦。

虚拟机

因为之前开发需要，我已经安装了 Genymotion，就直接使用了。但是官网也提供了 Google emulator 的启动方法，也不麻烦。

再跑个 Android 虚拟机的试试

设备

在 Genymotion 创建并启动一个 device，在命令行运行：

1	adb devices

就能看到类似的结果：

1 2	List of devices attached 192 .168 .56 .101 :5555 device

第一列表示设备 ID，第二列表示设备状态，device 表明可以运行。

启动

命令行运行

1	react-native run-android

等等就能在虚拟机中看到启动了和刚刚 IOS 中一样的应用，点击 Genymotion player 右侧的菜单按钮，同样能打开开发菜单。

USB 调试真实设备

手机开启 USB 调试 之后，用 USB 链接电脑，再次运行 adb devices 一般情况下就能看到类似：

1 2	List of devices attached 14ed2fcc device

说明你的设备已经链接上了，然而我手上的魅族却怎么也不出来。查一下资料很快就找到解决方案：

1	echo 0x2a45 > .android/adb_usb.ini

另外官网声明：

You must have only one device connected.

下面这个是我遇到的问题和采纳的解决方案：

有且只能有一个设备链接，这时候再运行 react-native run-android 理论上应该就能和虚拟机一样跑起来了吧。然而真是图样图森破，Building 到 97% 又爆一个问题：

      
      
       
       app:installDebug
      
      
      
      
       
       Installing APK 
       
       'app-debug.apk' 
       
       on 
       
       'm2 - 5.1'
      
      
      
      
       
       03:
       
       44:
       
       04 E/
       
       2099056020: Error 
       
       while uploading app-
       
       debug.apk : Unknown failure
      
      
      
      
       
       Unable 
       
       to install /path/
       
       to/AwesomeProject/android/app/build/outputs/apk/app-
       
       debug.apk
      
      
      
      
       
       com.android.ddmlib.InstallException: Unable 
       
       to upload some APKs
      
      
      
      
       
         at 
       
       com.android.ddmlib.Device.installPackages(Device.jav
       
       a:920)
      
      
      
      
       
         ...
      
      
      
      
       
       :app:installDebug Failed
      
      
      
      
       
       FAILURE: Build Failed with 
       
       an exception.
      
      
      
      
       
       * What went wron
       
       g:
      
      
      
      
       
       Execution Failed 
       
       for task 
       
       ':app:installDebug'.
      
      
      
      
       
       > 
       
       com.android.builder.testing.api.DeviceException: 
       
       com.android.ddmlib.InstallException: Unable 
       
       to upload some APKs
      
      
      
      
       
       ...

React Native 真是被各路国产机坑坏了，还好有人给出了解决方案：将 android/build.gradle 第 8 行的版本号改成 1.2.3 即可

      
      
       
       // Top-level build file where you can add configuration options common to all sub-projects/modules.
      
      
      
      
       
       buildscript {
      
      
      
          
       
       repositories {
      
      
      
      
       
               jcenter()
      
      
      
      
       
           }
      
      
      
          
       
       dependencies {
      
      
      
              
       
       classpath 
       
       'com.android.tools.build:gradle:1.2.3'
      
      
      
              
       
       // NOTE: Do not place your application dependencies here; they belong
      
      
      
              
       
       // in the individual module build.gradle files
      
      
      
      
       
           }
      
      
      
      
       
       }

再来一次，App 跳出来了！然而，然而是红色的错误界面吖，无论怎么 RELOAD JS 都提示 Unable to download JS bundle。还好不是只有我一个遇到这个问题，按照 jinmatt 的方法试一下：

1 2	adb reverse tcp:8081 tcp:8081 react-native run-android

这回真的好了！大幅度摇一摇手机，调出开发者菜单，我喜欢 Enable Live Relaod，然后就来改改 index.android.js：

      
      
       
       var {
      
      
      
      
       
         AppRegistry,
      
      
       
         SwitchAndroid,// add
      
      
      
      
       
       } = React;
      
      
      
      
       
       var PointsMall = React.createClass({
      
      
      
      
       
         render: 
       
       function() {
      
      
      
          
       
       return (
      
      
      
            
       
       <View style={styles.container}>
      
      
      
              
       
       <Text style={styles.welcome}>
      
      
      
      
       
                 Welcome to React-Native!
      
      
      
              
       
       </Text>
      
      
      
              
       
       <Text style={styles.instructions}>
      
      
      
      
       
                 To get started,edit index.android.js
      
      
      
              
       
       </Text>
      
      
      
              
       
       <Text style={styles.instructions}>
      
      
      
      
       
                 Shake or press menu button for dev menu
      
      
      
              
       
       </Text>
      
      
      
      
       
               {/* add */}
      
      
      
              
       
       <SwitchAndroid />
      
      
      
            
       
       </View>
      
      
      
      
       
           );
      
      
      
      
       
         }
      
      
      
      
       
       });

这回 App 的文字底部增加了一个 Android 的 Switch 按钮。

转载自：http://csbun.github.io/blog/2015/12/starting-react-native-with-android/

React Native 安装apk的问题