React Native植入原生Android运用的流程剖析

2019年8月30日 189次阅读 来源: EdwardUp

弁言

React Native是如今挪动开辟新的可选计划，也带来了原属于Web范畴的React的优异开辟特征。另一方面，React Native的手艺栈一经控制，能够用于iOS、Android及Windows（见此）多个平台，即所说的“learn once, write anywhere”。

最先运用React Native的题目

怎样运用React Native？参照官方指南，你会发明官方通知你的是：请用react-native init敕令来建立一个React Native项目。这个项目的根目次构造是如许：

《React Native植入原生Android运用的流程剖析》

然则，以Android为例，一个平常原生项目的根目次构造倒是如许（Android Studio 2.1.2）：

《React Native植入原生Android运用的流程剖析》

能够看到，Android原生项目（上图的Drill根目次）平级于天生的React Native项目的android目次。那末，假如一直以来都是Android原生开辟，如今想要引入React Native，斟酌部份页面用React Native完成，应当怎样做呢？

这就是React Native植入原生运用的题目。明显，react-native init敕令天生的项目在构造上不太符合，它的起点更像是“完整用React Native做一个多平台运用”，但我们能够须要的是“一个原生运用但有部份内容是用React Native做的”。

在本文的时刻点，React Native的最新版是0.27。官方对此已给出植入原生Android运用的指南，但它不够准确，也缺乏一些细节。因而，本文将供应一个React Native植入原生Android运用的更细致一点的流程。

假如你想相识iOS版的，能够浏览这篇文章。

植入Android流程

基础环境

这篇流程是windows及Android Studio，假如你已是一个Android Studio原生运用开辟者，以及Node.js用户，那末所需的环境你基础已有了。详情请参考windows环境搭建笔墨教程以及最先运用React Native，什么都没有也没紧要，恰好从新搭建。

另外，Android模仿器运用了Genymotion，注册后就能够供个人运用，会比官方模仿器机能要好一些。

新建Android项目

让我们从一个全新的Android原生运用最先。

用Android Studio建立一个新项目，注重Minimum SDK应设置为API 16及以上（React Native要求Android4.1以上的环境）：

《React Native植入原生Android运用的流程剖析》

增添npm组件

到Android原生项目的根目次（也能够新建一个目次，但根目次比较经常使用）新建一个文件package.json，内容以下（这里起名为react-native-module）：

{
  "name": "react-native-module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^15.1.0",
    "react-native": "^0.27.2"
  }
}

下面的dependencies的内容要怎样得知呢？答案是参考react-native init天生的项目，毕竟版本号是会不断更新的。假如你已init天生过项目，能够运转react-native upgrade更新后再参考。

然后，在这个package.json的所在位置，实行：

npm install

安装好所需的npm组件。

增添index.android.js文件

一样在根目次，增添一个文件index.android.js，这是React Native开辟的详细内容，是恣意的，这里给一个简朴的例子：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.note}>
          acgtofe.com with react native
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  note: {
    fontSize: 20
  }
});

AppRegistry.registerComponent('react-native-module', () => App);

注重上面代码末了的react-native-module这个名字比较主要，能够自定，但背面还会在其他处所用到，须要保持一致。

在Android运用内增添依靠

回到Android Studio，到app的build.gradle文件（module级别的gradle）里增添依靠：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile "com.facebook.react:react-native:0.27.2"
}

末了一行的react-native就是我们新增的，注重这里的版本号要和package.json里的一致。

运转一次Gradle Sync，你必然会获得这个毛病：

《React Native植入原生Android运用的流程剖析》

这是由于Android项目默许的依靠包的源jcenter()并不包含最新版的React Native（它只到0.20.1）。新版的React Native都只在npm里宣布，因而你须要增添一下依靠包的源，到根目次的build.gradle文件（project级别的gradle）内增添以下内容（从官方的这句解释也能够相识到这一点）：

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$projectDir/../node_modules/react-native/android"
        }
    }
}

这里的url途径，将取决于你安排node_modules的位置（你能够依据须要挑选安排在其他处所）。以上是node_modules位于根目次时的url途径，把它改成"$rootDir/node_modules/react-native/android"也是能够的，它们等效。怎样晓得这个途径写对了呢？反复试就能够了，假如途径不对，Gradle Sync的时刻一定会提示你前面的毛病。

你能够在许多别的处所看到的都是如许的写法：

compile "com.facebook.react:react-native:+"

不太发起如许做，由于没有明白的版本号，你没法让体系帮你推断前面的url途径写的是不是准确。假如写错，Android将运用宣布在jcenter()的旧版React Native，而这将激发其他毛病（见后文）。

新建React Native的Activity

新建一个继续自ReactActivity的activity（这里起名为LiveActivity），Android Studio会提示你必须完成3个要领，平常写成如许：

public class LiveActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "react-native-module";
    }

    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage()
        );
    }
}

getMainComponentName()的字符串返回值，必须和前面的index.android.js内的组件名一致。

getUseDeveloperSupport()是一个逻辑返回值，示意是不是启用开辟者形式。这里写BuildConfig.DEBUG就能够自动依据gradle构建的范例（debug或release）来决议。

getPackages是模块列表，平常像上面代码如许就能够。假如你须要在JavaScript里挪用原生Java模块，就要把它们增添到这里，详细能够参考这篇文章。

清单文件增添声明

到Android清单文件AndroidManifest.xml增添以下内容（省略了无关部份）：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.acgtofe.drill">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application ... >
         ... 
        <activity android:name=".LiveActivity" />
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

前面的权限都是React Native开辟环境须要用到的。背面的LiveActivity是适才的React Native运转界面，DevSettingsActivity则是以下这个Dev Settings的界面：

《React Native植入原生Android运用的流程剖析》

它也是开辟版所必须的。

启动packager server

到package.json的位置，翻开敕令行，运转packager server：

react-native start

也能够用npm start。启动后的状况看起来像如许：

《React Native植入原生Android运用的流程剖析》

运转起来

这是末了一步了。build这个Android项目，安装到模仿器里，然后翻开运用，切换到LiveActivity界面（用按钮跳转，或许直接设置为启动界面都能够），这时刻应当只看到一片空白。

按ctrl + m（这是Genymotion的用法，事实上，这是Android的Menu键，如今的实体装备基础没有这个键，但摇一摇能够触发）开启调试菜单，挑选Dev Settings，翻开前面贴过图的DevSettingsActivity，设置Debug server host & port for device为本机ip地点（敕令行内ipconfig检察）。末了，回到LiveActivity，开启调试菜单挑选Reload JS，守候一会儿，假如你看到了像下图如许的界面：

《React Native植入原生Android运用的流程剖析》

就申明完成了！对应的，packager server里应当能够看到每一次要求的纪录：

《React Native植入原生Android运用的流程剖析》

接下来，你就能够最先React Native的开辟了，修改保留后，从新Reload JS，就能够看到新的效果。

发起及革新

发起运用Android 5.0+的装备（包含模仿器），它们支撑直接USB传输packager server返回的谁人bundle js文件。假如是Android 5.0+，能够USB衔接电脑后（假如是模仿器，那就即是已衔接）运转以下敕令：

adb reverse tcp:8081 tcp:8081

然后就能够省略掉前面流程里设置本机ip地点那一步，直接Reload JS。注重装备须要开启USB调试（模仿器不必），而且电脑同时只衔接一个装备。

相对于前面设置本机ip地点的体式格局，这帮你免去了统一WiFi环境、代办等贫苦。

不顺利的状况

虽然流程看起来轻松愉快，但并不怎么能一次胜利。下面是我在流程中遇到过的一些题目及其纪录，能够用作参考。

版本不婚配

毛病提示以下：

《React Native植入原生Android运用的流程剖析》

参照github上的issue，这个毛病的激发原因是packager server的React Native版本和Android运用内的不一致。比方运用内的gradle依靠写的是compile "com.facebook.react:react-native:+"但url途径写得不对，效果用的就是jcenter()里的0.20.1的旧版，就会有这个题目。

因而，发起用compile "com.facebook.react:react-native:0.27.2"如许的写法，并搜检版本号是不是和package.json里的一致。

404

《React Native植入原生Android运用的流程剖析》

这是说index.android.js文件不存在的毛病。但我遇见的是文件就在那，也出这个毛病。

这多是由不准确的缓存引发，我的处理要领：封闭server，删除index.android.js，然后重启server，革新，获得真正的404，然后复原index.android.js，再革新即处理。

没法衔接到server

《React Native植入原生Android运用的流程剖析》

先根据Try the following to fix the issue: 下给出的处理要领顺次搜检和尝试。假如仍不能处理，删撤除node_modules目次，从新npm install，然后重开server。

windows下删除node_modules目次能够有途径太长的题目，引荐用rimraf来删除。

500

《React Native植入原生Android运用的流程剖析》

这个题目须要详细看server的输出，我这里的毛病信息是：Error: Unable to find file with path: ......polyfills\prelude_dev.js。相似前面的没法衔接server，我也是删除node_modules后从新安装获得处理。

有效的调试要领

流程中能够遇到的题目能够分为两类，Android运用（client）和server。假如看到毛病，翻开浏览器接见http://localhost:8081/index.android.bundle?platform=android，假如能看到输出的JavaScript代码，那申明server是比较一般的，更多是Android运用的题目。反过来，假如浏览器里一样看到毛病信息，那更能够就是server的题目。

没有Flow和Nuclide

你能够在最先用React Native的历程当入耳说了Flow和Nuclide，它们分别是JavaScript范例搜检东西及React Native的引荐IDE。

但请注重，在本文的时刻点，它们还没有windows版。我是用Atom来开辟React Native的。

宣布正式版

React Native的开辟版是须要有一个packager server来随时发送更新后的bundle js文件的。但假如要获得真正署名的正式版（app-release），你须要把bundle js文件保留到Android运用的资本目次内。如许，正式版不再须要server支撑，能够自力运转。

参照官方的刊行APK包指南，你只须要如许几步：

  • 建立目次app/src/main/assets。

  • 运转以下敕令（对应本文流程的目次构造），将bundle js文件保留到资本目次。

react-native bundle --platform android --dev false 
--entry-file index.android.js 
--bundle-output app/src/main/assets/index.android.bundle 
--assets-dest app/src/main/res/

  • 在Android Studio里挑选Build→Generate Signed APK...，天生正式版的apk。

官方有提到运用react.gradle文件的要领，但我以为像上面如许不必它更简朴。

正式版的立即更新

看起来正式版把bundle js文件保留到了apk内，这彷佛就丧失了React Native的立即更新？对的，但仍然有方法完成它，你能够看看React-Native-Remote-Update，这个项目已过期了，但内里贴出的道理很值得参考。

如今，你能够用react-native-auto-updater来协助你完成React Native的立即更新。

参考材料集

我在写本文的历程当中参考了下面三个材料鸠合，以为异常棒，在此也贴出来：

结语

React Native的Android版本是客岁9月（2015.9.15）才推出，此前只要iOS版。相对来说，Android的相干教程要比iOS少许多。因而，我以为有如许一份windows + React Native for Android的组合流程会很有协助。

来尝试新的挪动开辟计划吧！

（从新编辑自我的博客，原文地点：http://acgtofe.com/posts/2016/06/react-native-embedding-android）

    原文作者：EdwardUp
    原文地址: https://segmentfault.com/a/1190000005768791
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞