现有项目集成RN模块

参考 : https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content
cd到对应的workspace目录,新建react工程目录ReactProject,

$cd ReactProject

创建package.json的空文本文件，然后填入以下内容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.3"
  }
}

执行命令

$ npm install

命令完成后目录结构如下:

image.png

然后将已有的android工程拷贝到这个目录下:

image.png

修改现有android工程根目录下的build.gradle文件

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

修改app目录下的build.gradle文件:

dependencies {
  compile "com.facebook.react:react-native:+" // From node_modules.
}

image.png

proguard.rule文件添加如下配置:

#React Native

-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
-keep class * extends com.facebook.react.bridge.NativeModule { *; }
-keepclassmembers,includedescriptorclasses class * { native <methods>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }

-keep class com.facebook.** { *; }
-dontwarn com.facebook.react.**

修改Application,使自己的Application实现ReactApplication接口

public class MyApplication extends MultiDexApplication implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return true;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }

        @Nullable
        @Override
        protected String getJSBundleFile() {
            return super.getJSBundleFile();
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(this);
        mPreferences.edit().putString("debug_http_host", "10.234.121.155:8081").apply();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

新建activity:

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        File newFile = new File(NRFilePath.getDownloadImgPath() + "jsbundle");
        try {
            newFile.createNewFile();
        } catch (IOException e) {
            e.printStackTrace();
        }
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager, "MyHelloReact", null);

        // 这里也可以直接setContentView(mReactRootView). 这里这么做是想在一个activity中既有原声的界面 也有RN界面.
        setContentView(R.layout.react_activity_test);
        LinearLayout layout = (LinearLayout) findViewById(R.id.react_container);
        layout.addView(mReactRootView);
        
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

mainifest中配置activity

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        <activity android:name="com.xxx.nr.biz.pc.account.MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

打rn离线包:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output /home/dengxuan/workspace/MyReact/index.android.bundle --assets-dest /home/dengxuan/workspace/MyReact/release

将打好的离线包 index.android.bundle 文件 拷贝到android工程的assets目录下.
打包安装,或直接运行

adb shell input keyevent 82  可换起调试devsetting dialog

image.png