在Android原生应用中集成React Native版本的豆瓣电影

Github 项目 HybridApp

这是一个在Android原生应用中集成React Native 的项目。在原生应用中集成了一个仿豆瓣客户端（很久之前写的，UI已经不怎么像了o(╯□╰)o）的React Native应用。

效果图

top250

yuanxian

更多效果图可参考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 getPackages() {
            return Arrays.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，剩下的两个步骤就很简单了，这里就不再赘述，直接看代码就明白了。

更多细节源码，有兴趣的同学可参考github源码了解。

更多

这里集成在项目中React Native应用的源码在这里React Native 仿豆瓣电影，对React Native应用感兴趣的童鞋可以观摩一下O(∩_∩)O哈哈~。

应用中用到的数据，抓取自豆瓣API及豆瓣开发平台，仅供学习

更多React Native 学习整理，请看ReactNativePractice 欢迎fork & star

---

放假前人都走光了，不想工作，玩耍了一上午，终于写完了，回家过年！O(∩_∩)O哈哈~