1、新建一个原生项目rn_into_native模拟老的native项目。
2、用webStorm或者命令行新建一个react-native项目rn_project,用来对比。
3、在项目根目录下执行命令:npm init,该命令会创建一个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"
},
然后在项目根目录
执行npm install生成node_modules目录,也可以直接将该目录复制过去。
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"
}
路径根据实际情况修改。
AndroidManifest.xml
加入如下内容:
<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、复制js文件到原生项目中,修改下组建名称
{
"name": "rn_into_native",
"displayName": "rn_into_native"
}
6、创建RnActivity
public class RnActivity extends ReactActivity{
@Override
protected String getMainComponentName() {
return "rn_into_native";
}
}
创建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开启服务器。
8、在原生app中跳转RnActivity。
注意点:RnActivity中getMainComponentName、AppRegistry.registerComponent的注册名称以及package.json中的name三者必须保持一致。