Making project HybridApp

This is a project to integrate React Native with Android apps. React Native integrates a fake Douban client into the React Native app.

rendering

See HybridApp for more renderings

Integrate React Native applications

As a matter of fact, React Native’s official document on Integration with Existing Apps has detailed instructions on how to integrate React Native into Existing Apps. There are basically no problems with implementing the Integration step by step according to the document.

React Native application components, such as the react-native camera/react-native image-picker, are used in React Native applications. How do you properly integrate native components into native projects at this point?

In fact, if you open the Android directory of the React Native project with AS, you will find that the Native component (such AS the React-native camera) is a submodule dependent on the main project (app). In the React Native project, the React Native framework automatically implemented the dependency process for us by executing the React-Native link command. In this process, we mainly did three things:

  • Add the alias and path of the dependent component to the setting.gradle file
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-camera/android')
Copy the code
  • Add dependencies to 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
}
Copy the code
  • In the getPackages () method of MainApplication.java, add the corresponding Package for our component.
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport(a) {
            return BuildConfig.DEBUG;
        }

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

        @Override
        protected String getJSMainModuleName(a) {
            return "index"; }};Copy the code

I have to say, these automatic implementation steps are really cool, do not know how to implement the internal? ୧ (๑ • ̀ ◡ • ́ ๑) ૭

Unfortunately, the react-Native link does not automatically implement the above steps after the React Native project is integrated into the React Native project, so we need to manually add Native group price dependencies. It’s easy to understand the relative strength of the node_modules directory and the project directory. Here is an example of road strength in 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')
Copy the code

This is the same as the submodule of native applications, except that in native projects submodules are created directly in the project root directory, eliminating the need to write projectDir. With this custom module, the remaining two steps are easy to follow, so you can just look at the code.

For more details of the source code, interested students can refer to github source code.

More and more

The data used in the application is captured from douban API andDouban development platformFor learning only