现有的android工程中集成到react native

已经有两个开发完整的react native项目，和android项目。需求是在android项目中加入react native的入口。

由于两个项目都是完整的，有许多配置会互相影响。如下记录采坑过程

1.首先备份react native项目中的android的目录（android_BK），删掉android目录。下文要参考android_bk对现有的android项目进行配置

2. 替换为现有的android项目（android） ，添加React Native所需要的依赖，具体参看React Native 混合开发(Android篇)，第二节

3. 修改android目录的applicaiton.java文件。

  a 添加implements ReactApplication

 

 b 把android_bk中application的内容，添加到android下的applicaiton中

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 PickerViewPackage(),
          new LinearGradientPackage(),
          new VectorIconsPackage(),
          new RNGestureHandlerPackage(),
          new RNToastPackage()
      );
    }

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

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }

3. 创建MainActivity

package com.yqt;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "yqt";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
      return new ReactActivityDelegate(this, getMainComponentName()) {
        @Override
        protected ReactRootView createRootView() {
         return new RNGestureHandlerEnabledRootView(MainActivity.this);
        }
      };
    }
}

4. 在AnddroidManifest.xml添加

<activity
            android:name=".ui.react.MainActivity"
            android:configChanges="orientation|keyboardHidden|screenSize"
            android:launchMode="standard"
            android:protectionLevel="signature"
            android:screenOrientation="portrait"
            android:theme="@style/WelcomeTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

 

问题记录：

问题一：

1.React Native version mismatch.JavaScript version: 0.55.4 Native version:0.51.0

2. 在运行React Native项目时出现Application XXX has not been registered.

这两个问题的解决方案是，删除掉build文件夹、和assets中的index.android.bundle.js文件，重新执行打包命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

问题二  在webstorm中执行react-native run-android命令，执行成功，但是模拟器中没有安装apk

原因是安卓项目，上架时，为了区分不同的应用市场，加了渠道参数。因此也需要在react-native run-android命令后加入渠道参数。

react-native run-android --flavor 渠道名Debug   即可

例如：react-native run-android --flavor huaweiDebug  

问题三: 执行react-native run-android命令，安装到模拟器中时，报找不到index.android.bundle.js。

修改：修改Application文件中的getUseDeveloperSupport 返回true。便可在开发环境下加载本地服务器的脚本，而非加载index.android.bundle.js

问题四：原来的react native依赖react-native-vector-icons。与现有的android项目融合后，出现icon显示不正常的问题，查看react-native-vector-icons官方文档找到答案。

由于现在的android项目很多文件目录和原来的不一致，执行react-native link不成功。因此只能手动配置依赖

 大多react-native link都是默认执行如下三步：

1. Edit android/settings.gradle to look like this (without the +):

+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

2 Edit android/app/build.gradle (note: app folder) to look like this:

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
+ compile project(':react-native-vector-icons')
}

3 Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

package com.myapp;

+ import com.oblador.vectoricons.VectorIconsPackage;

....

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

}

然而我忽略了一步

Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).

总结来说：

1. 添加React Native所需要的依赖

2. 创建继承自reactActivity的activity

3. 现有的Application实现ReactApplication

4. AnddroidManifest.xml添加activity

5. 正确配置react-native的第三方依赖包