1.在原有 Android 專案中嵌入 ReactNative 模組

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

1、專案的準備

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

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:+'

• 在工程目錄下找到工程的 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"

接著依次輸入下面的命令

$ 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