Github 项目 HybridApp
这是一个在 Android 原生应用中集成 React Native 的项目在原生应用中集成了一个仿豆瓣客户端 (很久之前写的, UI 已经不怎么像了 o()o) 的 React Native 应用
效果图
更多效果图可参考 HybridApp
集成 React Native 到原生应用
其实, 关于怎么把 React Native 集成到原生应用中, React Native 的官方文档 Integration with Existing Apps 已经有了详细的说明, 严格的照着文档一步一步执行下来, 基本上是没有什么问题的
这里再补充一点官网没有提及的内容吧, 就是如果在 React Native 应用中使用到了原生应用的组件, 比如常见的 react-native-camera/react-native-image-picker 等, 这个时候该如何正确的把这写原生组件集成到原生项目中呢?
其实, 如果你用 AS 打开过 React Native 项目下 Android 目录的话, 可以发现其实原生组件 (比如 react-native-camera) 就是一个主工程 (app) 依赖的子 module. 在 React Native 的项目中, 我们通过执行 react-native link 这个命令, React Native 框架会自动帮我们实现整个依赖过程, 在这中间主要做了三件事:
在 setting.gradle 文件中添加依赖组件的别名及路径
- include ':react-native-camera'
- project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
在 app/build.gradle dependencies 结点中添加依赖
- dependencies {
- compile project(':react-native-camera')
- compile fileTree(dir: "libs", include: ["*.jar"])
- compile "com.android.support:appcompat-v7:23.0.1"
- compile "com.facebook.react:react-native:+" // From node_modules
- }
在 MainApplication.java 的 getPackages()方法中, 为我们添加组件所对应的 Package
- 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(),
- new RCTCameraPackage()
- );
- }
- @Override
- protected String getJSMainModuleName() {
- return "index";
- }
- };
不得不说, 这几个自动实现的步骤的确很牛逼, 不知道内部是咋实现的?(̀́)
稍显遗憾的是, 把 React Native 集成到原生项目中后, 再次执行 react-native link 后上述步骤是无法自动实现的, 因此这就需要我们去手动添加原生组价的依赖其实这个过程也很简单, 理解了 node_modules 目录和项目目录之间的相对路劲关系即可这里以此项目中 setting.gradle 中的路劲为例:
- include ':app'
- include ':react-native-camera'
- project(':react-native-camera').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-camera/android')
- include ':react-native-video'
- project(':react-native-video').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-video/android')
- include ':react-native-image-crop-picker'
- project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, 'node_modules/react-native-image-crop-picker/android')
这里其实和原生应用中子 module 是一个意思, 只不过在原生项目中, 子 module 一般都是直接创建在项目根目录中, 就省去了写 projectDir 的步骤了有了这个自 module, 剩下的两个步骤就很简单了, 这里就不再赘述, 直接看代码就明白了
来源: https://juejin.im/post/5a8255996fb9a063523df443