美文网首页
如何集成RN到Android原生项目

如何集成RN到Android原生项目

作者: 田_19ab | 来源:发表于2018-12-11 15:57 被阅读0次

    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三者必须保持一致。

    相关文章

      网友评论

          本文标题:如何集成RN到Android原生项目

          本文链接:https://www.haomeiwen.com/subject/jvunnftx.html