1汇在、新建一個原生項目rn_into_native模擬老的native項目浓恳。
2、用webStorm或者命令行新建一個react-native項目rn_project笛谦，用來對比抱虐。
3、在項目根目錄下執(zhí)行命令:npm init饥脑，該命令會創(chuàng)建一個package.json文件恳邀，修改這個文件的scripts：
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
,以及添加react合react native的依賴：
"dependencies": {
"react": "16.6.1",
"react-native": "0.57.7"
},
然后在項目根目錄
執(zhí)行npm install生成node_modules目錄，也可以直接將該目錄復(fù)制過去灶轰。
4谣沸、對比三個文件，根目錄的build.gradle笋颤、app目錄的build.gradle乳附、AndroidManifest.xml，將缺失的的配置加入到老項目。
app目錄的build.gradle
defaultConfig中需要加入
ndk {
abiFilters "armeabi-v7a", "x86"
}
dependencies中需要加入
implementation "com.facebook.react:react-native:+" // From node_modules
根目錄的build.gradle
allprojects中需要加入
mavenLocal()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
路徑根據(jù)實(shí)際情況修改许溅。
AndroidManifest.xml
加入如下內(nèi)容：
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
5、復(fù)制js文件到原生項目中秉版，修改下組建名稱
{
"name": "rn_into_native",
"displayName": "rn_into_native"
}
6贤重、創(chuàng)建RnActivity
public class RnActivity extends ReactActivity{
@Override
protected String getMainComponentName() {
return "rn_into_native";
}
}
創(chuàng)建MainApplication并在AndroidManifest.xml添加name
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
7、用ide或者命令行npm start開啟服務(wù)器清焕。
8并蝗、在原生app中跳轉(zhuǎn)RnActivity。
注意點(diǎn)：RnActivity中g(shù)etMainComponentName秸妥、AppRegistry.registerComponent的注冊名稱以及package.json中的name三者必須保持一致滚停。
