首先保證安裝了node,watchman,yarn。

1.新建一個資料夾A，裡面新建一個資料夾android，然後把專案根目錄下所有內容放入這個android裡。直接全選複製的話沒有git，可以把整個專案移過去再改名為android。

2.在A下新建package.json：

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

專案名稱和版本號無影響，下面的依賴版本號自行選擇。

3.使用yarn下載依賴:

下載Js檔案所需的庫，一般來說都有react和react-native，下載的內容都會放在node_modules裡：

yarn add react              yarn add react-native

4.新建index.js放在A下（Helloworld），若有多個js，需要從入口js開始進行樹形依賴，否則不會被匯入，例如import * as Config from './second.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}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  hello: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

AppRegistry.registerComponent("MainModule", () => HelloWorld);
 

注意最後一行註冊的第一個引數，後面就要用這個字串來載入這個js。

5.專案配置RN依賴：

    implementation fileTree(dir: 'libs', include: ['*.jar'])

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

defaultConfig {
        
        ndk {
//            abiFilters "armeabi-v7a","x86"
            abiFilters "armeabi-v7a"
        }

不配這個NDK的話會報找不到so檔案的錯誤，網上的解決方案都是配v7a和x86，但是我的專案有別的so依賴，不支援x86，所以只寫v7a。為什麼是這兩個呢，原因在node_modules\react-native\ReactAndroid\src\main\jni\Application.mk裡有這個的配置：

APP_BUILD_SCRIPT := Android.mk

APP_ABI := armeabi-v7a x86
APP_PLATFORM := android-16

APP_MK_DIR := $(dir $(lastword $(MAKEFILE_LIST)))

NDK_MODULE_PATH := $(APP_MK_DIR)$(HOST_DIRSEP)$(THIRD_PARTY_NDK_DIR)$(HOST_DIRSEP)$(REACT_COMMON_DIR)$(HOST_DIRSEP)$(APP_MK_DIR)first-party

APP_STL := gnustl_shared

# Make sure every shared lib includes a .note.gnu.build-id header
APP_LDFLAGS := -Wl,--build-id

NDK_TOOLCHAIN_VERSION := 4.8

我把這裡的x86也刪了，沒有問題。

6.將js打入index.android.bundle。安卓通過index.android.bundle去執行js檔案，所以每次修改完js都要同步到index.android.bundle裡。（沒有assets資料夾和index.android.bundle先自己建一個）：

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

7.使用：

一切都配完了，接下來就是使用了。新建一個維護ReactInstanceManager單例的類：

public class ReactUtils {
    private volatile static ReactInstanceManager manager;

    public static ReactInstanceManager getManager(){
        if (manager == null){
            synchronized (ReactInstanceManager.class){
                if (manager == null){
                    manager = ReactInstanceManager.builder()
                            .setApplication(EffectApplication.getInstance())
                            .setBundleAssetName("index.android.bundle")
                            .setJSMainModulePath("index")
                            .addPackage(new MainReactPackage())
                            .setUseDeveloperSupport(BuildConfig.DEBUG)
                            .setInitialLifecycleState(LifecycleState.RESUMED)
                            .build();
                }
            }
        }
        return manager;
    }
}

新建一個activity extends AppCompatActivity：

private ReactRootView mReactRootView;

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

        mReactRootView = new ReactRootView(this);
        // 注意這裡的MyReactNativeApp必須對應“index.js”中的
        // “AppRegistry.registerComponent()”的第一個引數
        mReactRootView.startReactApplication(ReactUtils.getManager(), "MainModule", null);

        setContentView(mReactRootView);
    }

然後進這個aty就能看到hello world了，載入別的js也是一樣的。