原有Android项目集成RN入坑记（二）
上次说到，在迁移到androidx的过程中放弃了。不过，本着不放弃的原则，最终还是解决了。这里就做个记录。
迁移至AndroidX首先是迁移至AndroidX，其实这个问题其实本身很简单，主要是一些support控件需要转。但是当原有项目比较庞大的时候，直接转是比较困难的，所以最终曲线救国新建了一个android项目，targetSdkVersion和compileSdkVersion都设置成28，然后对照原来app.gradle里面依赖的控件取网上找对应的androidx的控件，全部编译完成之后，再把源代码给复制到新项目中。具体的迁移，我主要是下面参照的这篇文章中的
迁移至androidx
然后主要是记录下几个注意点：
1.改完java文件中的控件依赖，别忘了改下xml文件中的。这个貌似只能手动改，如果有朋友知道有更好的方法，请评论下，万分感谢！
2.用AS3.+版本，buildToolsVersion不需要再维护了。应该是自动使用最高的版本了。不过我没迁移到androidx之前，没有提示我去buildToolsVersion。应该还和gradle版本有关。
集成的话，还是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();
}
@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;i<array.size();i++){
ReadableMap map = array.getMap(i);
String column_type = map.getString("column_type");
String value = map.getString("value");
//这里传出去的字典类型必须是WritableMap，java中的Map、HashMap是不能传递到RN的
WritableMap map_callback = Arguments.createMap();
map_callback.putString("column_type",column_type);
map_callback.putString("value",value);
map_callback.putString("display_info",column_type+"-|-"+value);
array_callback.pushMap(map_callback);
}
callback.invoke(array_callback);
}
@ReactMethod
public void showNativePicker(String value,String appColumnName,String columnType,ReadableArray extraInfo){
}
@ReactMethod
public void pressImageAttachment(){
}
@ReactMethod
public void downloadAttachments(){
}
@Override
public String getName() {
return "ReactActionHandler";
}
}
MyReactPackage
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
贴完代码记录下这里的坑。
关于autolink link说明首先我用的是0.60.6版本的RN，因此按照网上说的是支持autolink的，以AsyncStorage为例，<0.60的在
npm install @react-native-community/async-storagenpm link @react-native-community/async-storage这里我记录下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)
1.我们的Application必须叫MainApplication，这点这里留个疑问吧，因为没在网上找到相关依据。原先我的Application不叫这个名，autolink死活不成功，根本不会自动生成@react-native-community/async-storage的module包，如果这个有朋友发现我说的不对，希望评论指正，感谢！
2.自动生成@react-native-community/async-storage的module包后还是不能直接使用这个组件，需要在RNRouteActivity里的ReactInstanceManager中加上AsyncStoragePackage的包，不然会报错：
AsyncStorage is null说完link，说下RN与原生交互。
实现方式 原生展示RN页面主要是通过RNRouteActivity 中的启动RN方法
startReactApplication(mReactInstanceManager, moduleName, moduleInitialBundle)AppRegistry.registerComponent('AndroidRnDemoApp', () => HelloWorld);主要是通过上文中的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与原生交互的一些问题。感觉上还是有点乱，希望后面能有个系统的认知吧。
作者：nuyunhai
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
