1.在原有 Android 項目中嵌入 ReactNative 模塊

ReactNative的發展已經進入了很多開發者視野，作為一名原生開發者更是對 RN 充滿了無限的好奇和期待
相信對于小白的我們，第一步就是如何優雅的集成rn項目,廢話不多說直接進入主題(我這邊是利用了as3.0創建)

1、項目的準備

1、首先創建一個android項目
2、搭建一些必要的環境 node.js  rn環境(相信這個網上一搜一大把，只要按步驟搭建即可)
3、項目的改造后的流程圖(這里盜用下網上的圖)

image.png

2、項目的依賴添加

• 在原生 Android 項目的在app/build.gradle文件中，添加React Native依賴(位置可參照下方的圖片)

ndk {
            abiFilters "armeabi-v7a", "x86"
        }
packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }
implementation 'com.facebook.react:react-native:+'

image.png

• 在工程目錄下找到工程的 build.gradle文件中，添加 maven依賴

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

• 在AndroidManifast 文件里面添加權限

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

3、創建項目入口

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onClick(View view) {
        startActivity(new Intent(this,Reactactivity.class));
    }
}

4、創建rn的入口

public class Reactactivity 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")
                .setJSMainModulePath("index.android")
                .addPackage(new MainReactPackage())
                /**
                 * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
                 * 調試模式下,建議直接寫成 true 吧,我就因為這個錯誤,調了兩天原因
                 */
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "hello", null);

        setContentView(mReactRootView);
    }

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

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

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

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

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


}

5、在AndroidManifast 文件里面添加創建RN的Activity

<activity android:name=".Reactactivity"/>

6、下面配置工程項目的 RN開發環境

1、先后順序依次執行一下命令
       $ npm init
這里需要你自己配置下package.json 里面的一些東西，照著提示配置可以參照下面的圖片配置即可
之后你的工程下面就會出現package.json 這個文件，然后打開添加，位置可參照下方圖片
        "start": "node node_modules/react-native/local-cli/cli.js start"

image.png

image.png

接著依次輸入下面的命令

$ npm install --save react
 $ npm install --save react-native
 $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

7、工程目錄下創建 index.android.js文件由于是測試，里面內容我是copy的

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

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生項目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


//注意：這個hello要和前面RN入口里面(startReactApplication方法里面的參數)的相對應
AppRegistry.registerComponent('hello', () => AwesomeProject);

8、現在你可以運行的你的android項目

運行之后使用：npm start 或者react-native start

====================================

以下是踩過的坑

unable to load script from assets 'index.android.bundle'
..............
..........

如果報這個錯，說明你沒有這個index.android.bundle文件

解決辦法：

在你的app/main/src/目錄下面創建assets這個見文夾之后運行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output 
app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res