簡介：

Activity 和 ReactNative 混合開發時，有時我們需要直接引入已經寫好的reactNative js元件。此時就需要我們對Activity如何引用ReactNative進行了解。 本篇介紹了Activity如何直接應用一個寫好的ReactNative元件。

具體步驟:

1，AndroidStudio建立 專案：

1.1 命令列進入專案根目錄執行命令：

> npm init

> npm install react react-native --save

生成如下：node_noudle 和 package.json

1.2 package.json:
//新增 命令：
//新增 依賴 如果 沒生成 依賴上面命令 請自行新增 然後執行 npm install 或者 yarn install：

{
  "name": "androidkissrn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "zhaoq",
  "license": "ISC",

  "dependencies
 
": {
    "react": "^16.2.0",
    "react-native": "^0.51.0"
  }
}

2，gradle 配置：

//專案  根目錄gradle
allprojects {
    repositories {
        jcenter()
        maven { url 'https://maven.google.com' }

        //2，配置   maven 庫  指定  node_modules  模組
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
 

            url "$rootDir/node_modules/react-native/android"
        }
    }
}

//App   moudle中 gradle  配置
dependencies {
    //3，新增   gradle 依賴：
    compile "com.facebook.react:react-native:+" // From node_modules.
}

3，程式碼：

許可權檢查：

 //1,  檢查   許可權：   配置許可權以便開發中的紅屏錯誤能正確顯示   開啟懸浮窗 許可權
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, 154);
            }
        }

index.js 檔案：

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}>我是Rn 介面</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

執行 rn檔案和路徑

class Communicate1Activity extends AppCompatActivity 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")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意這裡的MyReactNativeApp必須對應“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一個引數
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

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

4，生成bundle 檔案：

執行命令： 生成bundle檔案 到assets 目錄下 如果沒有該目錄，請自建：

F:\androidStudioworkspace\AndroidKissReactNative> react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --as
sets-dest app/src/main/res/
Scanning folders for symlinks in F:\androidStudioworkspace\AndroidKissReactNative\node_modules (30ms)
Scanning folders for symlinks in F:\androidStudioworkspace\AndroidKissReactNative\node_modules (33ms)
Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: app/src/main/assets/index.android.bundle
bundle: Done writing bundle output

執行 App： activity 直接引用Rn 元件完成下面就可以愉快的用Rn寫我們的介面了。