React Native 0.35植入Android 原生应用。

本文链接：https://blog.csdn.net/mr_liu_gege/article/details/52850542

题引：

React Native 官方给出的植入原生应用的方法，一直是行不通的，为此我单独写一篇博文来介绍如何正确的植入Android原生应用。

一

模块配置：

1、单独创建一个文件夹NewSvn，将已存在的原生项目，单独放到该文件夹中。原生项目的命名暂时确定为：test
2、在NewSvn文件夹中，按住Shift+鼠标右键，打开命令行窗口。
3、命令行中输入：npm init
4、一直按回车，直至确认完毕。
5、命令行中再次输入：npm install –save react react-native
6、等待响应结束。
7、响应结束，此时NewSvn文件夹中应该有三个文件：test,package.json,node_modules
8、打开360浏览器的下载器，新建下载：https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
9、将下载好的.flowconfig文件，放到NewSvn文件夹中，此时，该文件下四个文件：test,package.json,node_modules，.flowconfig
10、打开package.json 文件。
11、将其中的部分内容自行矫正修改：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    }

12、在NewSvn文件夹中创建：index.android.js 文件。此时NewSvn文件夹中有五个文件。
文件内容：

'use strict';

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

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

13、使用AndroidStudio打开已存在”test”项目，添加如下代码：
Module的build.gradle文件中添加：

dependencies {
    ...
    compile "com.facebook.react:react-native:+" // From node_modules.
}

Project的build.gradle文件中添加：

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

}

14、在Module的Main文件夹下创建：assets文件夹。
15、创建MyReactActivity，并在AndroidManifest中添加

<activity
            android:name=".activity.MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

MyReactActivity文件内容：

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                //.setUseOldBridge(true) // uncomment this line if your app crashes
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this,this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.destroy();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

16、OK，现在可以重新编译一遍项目，然后依旧在NewSvn文件夹中打开命令行，输入：

react-native bundle --platform android --dev false --ent
ry-file index.android.js --bundle-output NewSvn/test/src/main/assets/index.andr
oid.bundle --assets-dest NewSvn/test/src/main/res/

需要注意的是：如果文件夹和项目起名没有按照我说做的话：注意：

NewSvn/test/src/main/assets/index.andr
oid.bundle --assets-dest NewSvn/test/src/main/res/

 此处：需要提出按成自己的项目路径。NewSvn/test

17、执行完上述代码之后：项目中assets文件夹中应该会有两个文件了：index.android.bundle 以及 index.android.bundle.meta
18、NewSvn根目录打开命令行：输入

npm start

19、run起你的项目吧。

二

BUG集锦：

如果严格按照我上述的操作，就会规避大部分BUG，但真实运行还是有部分BUG，如真机白屏的问题，这种问题请动动小手百度或者google一下解决。
如果还有其他的植入真机问题请在下方给我留言。