原有Android项目集成RN入坑记（二）
目录
- 迁移至AndroidX
- 集成React Native
- 关于autolink
- link说明
- autolink实现方式
- autolink的坑
- 关于RN与原生交互
- 实现方式
- 原生展示RN页面
- RN调用原生组件
- 数据传递
- 坑
- 总结
上次说到，在迁移到androidx的过程中放弃了。不过，本着不放弃的原则，最终还是解决了。这里就做个记录。
迁移至AndroidX
首先是迁移至AndroidX，其实这个问题其实本身很简单，主要是一些support控件需要转。但是当原有项目比较庞大的时候，直接转是比较困难的，所以最终曲线救国新建了一个android项目，targetSdkVersion和compileSdkVersion都设置成28，然后对照原来app.gradle里面依赖的控件取网上找对应的androidx的控件，全部编译完成之后，再把源代码给复制到新项目中。具体的迁移，我主要是下面参照的这篇文章中的
迁移至androidx
然后主要是记录下几个注意点：
1.改完java文件中的控件依赖，别忘了改下xml文件中的。这个貌似只能手动改，如果有朋友知道有更好的方法，请评论下，万分感谢！
2.用AS3.+版本，buildToolsVersion不需要再维护了。应该是自动使用最高的版本了。不过我没迁移到androidx之前，没有提示我去buildToolsVersion。应该还和gradle版本有关。
集成React Native
集成的话，还是npm install，然后那npm start。如果npm install的过程中提示版本不对的话，那就执行npm install [ rn package name]@[versionName],重新安装下报警告的组件即可。如下：
android项目中需要几个文件：
RNRouteActivity
public class RNRouteActivity extends ReactActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private String moduleName;
private Bundle moduleInitialBundle = new Bundle();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
AppManager.getAppManager().addActivity(this);
getModuleNameAndParams();
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setCurrentActivity(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.addPackage(new MyReactPackage())
//某些第三个组件需要加包，不然会报错，比如AsyncStorage
.addPackage(new AsyncStoragePackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
//这里的AndroidRnDemoApp必须对应“index.js”中的“AppRegistry.registerComponent()”的第一个参数
//moduleInitialBundle是传给RN的初始参数，可以直接传null,看个人需要
mReactRootView.startReactApplication(mReactInstanceManager, “testRn”, moduleInitialBundle);
//加载ReactRootView到布局中
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
/**
* ReactInstanceManager生命周期同activity
*/
@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(this);
}
}
@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);
}
}
ReactActionHandler
public class ReactActionHandler extends ReactContextBaseJavaModule {
private ReactApplicationContext mContext;
public ReactActionHandler(ReactApplicationContext reactContext) {
super(reactContext);
this.mContext = reactContext;
}
@ReactMethod
public void dismissReact(){
AppManager.getAppManager().finishActivity(AppManager.getAppManager().currentActivity());
}
/**
* 回传展示信息
*/
@ReactMethod
public void fetchDisplayInfo(ReadableArray array, Callback callback){
//这里接收RN传过来的数组只能是ReadableArray ，传递出去只能是WritableArray
WritableArray array_callback = Arguments.createArray();
array_callback.pushMap(null);
for(int i=0;iMyReactPackage
public class MyReactPackage implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
modules.add(new ReactActionHandler(reactContext));
return modules;
}
@Override
public List createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
MainApplication
public class MainApplication extends Application implements ReactApplication {
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
}
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
//注意：BuildConfig需要导入自己项目包名下的BuildConfig
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
//RN0.60+的可以这么写，0.60+的支持autolink，不需要在这里加包，但需要在 RNRouteActivity里加包，很奇怪，不然会报错。
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
}
然后还需要JS文件：
index.js
import React from 'react';
import {Alert,AppRegistry, Button, StyleSheet, Text, View} from 'react-native';
import { NativeModules } from "react-native";
class HelloWorld extends React.Component {
render() {
return (
Hello, World
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);
贴完代码记录下这里的坑。
关于autolink
link说明
首先我用的是0.60.6版本的RN，因此按照网上说的是支持autolink的，以AsyncStorage为例，<0.60的在npm install @react-native-community/async-storage之后，需要执行npm link @react-native-community/async-storage，执行完之后，正常情况，会在MainApplication的getPackages中多出来add new AsyncStoragePackage()类似的代码，同时在Android中会多出来@react-native-community/async-storage的module包。而autolink的特性是指在我们执行react-native run-android 时会自动多出来这个包。
这里我记录下autolink的实现方式，以及坑：
autolink实现方式
1.在app.gradle中 加入如下代码：
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
2.在settings.gradle中加入如下代码：
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
autolink的坑
1.我们的Application必须叫MainApplication，这点这里留个疑问吧，因为没在网上找到相关依据。原先我的Application不叫这个名，autolink死活不成功，根本不会自动生成@react-native-community/async-storage的module包，如果这个有朋友发现我说的不对，希望评论指正，感谢！
2.自动生成@react-native-community/async-storage的module包后还是不能直接使用这个组件，需要在RNRouteActivity里的ReactInstanceManager中加上AsyncStoragePackage的包，不然会报错：AsyncStorage is null 之类的
关于RN与原生交互
说完link，说下RN与原生交互。
实现方式
原生展示RN页面
主要是通过RNRouteActivity 中的启动RN方法startReactApplication(mReactInstanceManager, moduleName, moduleInitialBundle),这三个参数依次是：RN管理器对象，调用的原生方法ming,初始化RN时传入的初始参数（必须是Bundle对象或者null）。这个moduleName需要和index.js方法中的对应,比如我们index.js中的是AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);，那么moduleName就也是“AndroidRnDemoApp”。这样就可以展示AndroidRnDemoApp对应的HelloWorld
RN调用原生组件
主要是通过上文中的ReactActionHandler。继承RN的ReactContextBaseJavaModulelei,实现getName方法，这样RN中就可以通过NativeModules调用对应名字的原生类。比如上面代码片段中的ReactActionHandler。那么怎么调用这个类中的方法呢，答案是加上@ReactMethod注解即可。
数据传递
在调用带有@ReactMethod注解的方法是加上入参即可，需要回传给RN的话，加上Callback参数，并执行Callback.invoke(…args);即可
坑
这里的坑主要在数据传递，RN向原生传数据时，如果传Map/Array,必须时ReadableMap/ReadableArray,原生像RN传递数据时,如果传Map/Array,必须时WritableMap/WritableArray。其他数据类型以后再说，还没遇上。
总结
今天主要记录了RN0.60.6版本背景下集成RN的问题与注意点。同时简单得记录了RN与原生交互的一些问题。感觉上还是有点乱，希望后面能有个系统的认知吧。