react native接入原生项目（mac pro）

首先保证安装了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也是一样的。

react native接入原生项目（mac pro）

猜你喜欢