文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

原有Android项目集成RN入坑记(二)

2022-06-06 13:36

关注

目录迁移至AndroidX集成React Native关于autolinklink说明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();
    }
    
    @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-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与原生交互的一些问题。感觉上还是有点乱,希望后面能有个系统的认知吧。


作者:nuyunhai


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯