Android引用RN第三方控件,Android和RN互调方式,最近开发心得

本文是一位四年经验的程序员分享的Android与React Native(RN)交互的经验。作者介绍了如何导入和配置RN第三方控件,包括下载Node.js,集成示例项目,以及在Android中引用RN组件的步骤。同时,提供了Android调用RN的方法,包括在Activity中处理回调和发送事件。文章最后,作者表示对于RN如何调用Android部分还不熟悉,欢迎读者指正。
摘要由CSDN通过智能技术生成

“有人住高楼,有人在深沟,有人光万丈,有人一身锈,世人万千种,浮云莫去求,斯人若彩虹,遇上方知有。”

时隔四季,我重新开始了我的文章更新,so do you miss me?
在这里插入图片描述

前言

从工作到现在,我是个四年的程序员了,但是觉得自己踩的坑真的是填都填不完。所以决定把我踩的坑,系统性的归纳和记录,所以CSDN,爷回来了。
在这里插入图片描述
错了,是干净的爷回来了。
在这里插入图片描述

最近开发心得

  1. 有困难不要慌,问问同行讲讲逻辑,多交流,虽然不能教你咋写代码,但是可以分享思路给你(比如你android开发问ios或者问后端都一样)
  2. 在遇到陌生的项目时全局搜索很有用,你可以看看这个对象或者功能,在哪里注册,在哪里引用,在哪里实现。总会有灵感的
  3. 如果真的遇到了你敢想的事情,不要怕,不要怂,先百度看看,是不是真的有这方面的知识或者技能,站在巨人的肩膀上是ok的
  4. 砥砺前行,顶峰相见。
    在这里插入图片描述
  5. 面向CV,面向百度。冲鸭
    在这里插入图片描述

Android导入RN第三方控件给rn使用

1.下载Node.js
  1. Node.js 下载地址
    然后一路确定下一步就行

  2. 环境变量配置
    在这里插入图片描述

  3. 下载安装完成配置环境后打开命令行界面cmd输入

npm -v
  1. 出现如下界面就说明安装好了
    在这里插入图片描述
2.集成例子react-native-wheel-picker
  1. 地址react-native-wheel-picker GitHub地址,然后cmd输入下面的代码导入
npm i @yz1311/react-native-wheel-picker
  1. 导入的文件夹,默认C:\Users\自己的用户名\node_modules

  2. 导入成功后如下
    在这里插入图片描述

  3. 然后只留android文件夹把react-native-wheel-picker这个文件夹丢到Android项目中
    在这里插入图片描述
    在这里插入图片描述

  4. 项目的settings.gradle中添加导入
    在这里插入图片描述

  5. 项目中app的build.gradle中添加导入
    在这里插入图片描述

  6. 在react-native-wheel-picker中build.gradle如果有自己引用第三方rn框架就要换成自己的rn框架
    在这里插入图片描述

  7. 在Application中引用Package方法
    在这里插入图片描述

3.备注
  1. 我只有C盘所以node.js没有配置分盘的环境变量
  2. 至于RN那边如何调用,暂时不会,很抱歉,只分享了如何引用的,rn那边的同事是可以引用的
    在这里插入图片描述

Android和RN互调方式

public class RNDataMain extends LegoRNJavaModule {
    private static final int REQUEST_CODE = 1;
    private static Callback mDoneCallback;
    private static ReactApplicationContext rnContext;
    public RNDataMain(ReactApplicationContext reactApplicationContext){
        super(reactApplicationContext);
        rnContext=reactApplicationContext;
        //1.Activity活动传替参数创建监听
        reactApplicationContext.addActivityEventListener(mActivityEventListener);
    }
    public static void sendEvent(String eventName, String params){
        if (rnContext==null) return;
        //2.主动给rn传替参数
        rnContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,""+params);
    }
    //3.上下文异常需主动调用传参方式
    public static void  addActivityResult ( int requestCode, int resultCode, Intent intent){
        try {
        if (requestCode == REQUEST_CODE) {
            if (mDoneCallback != null) {
                if (resultCode == Activity.RESULT_CANCELED) {
                    WritableMap map = Arguments.createMap();
                    map.putString("succeed", intent.getExtras().getString("result"));
                    //4.invoke传参
                    mDoneCallback.invoke(map);
                } else {
                    WritableMap map = Arguments.createMap();
                    map.putString("err", intent.getExtras().getString("result"));
                    mDoneCallback.invoke(map);
                }
            }
        }
        }catch (Exception e){
        }
    }
    @NonNull
    @Override
    public String getName() {
        return "RNDataMain";
    }
    private final ActivityEventListener mActivityEventListener = new BaseActivityEventListener(){
        @Override
        public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent intent) {
            try {
                if (requestCode == REQUEST_CODE) {
                    if (mDoneCallback != null) {
                        if (resultCode == Activity.RESULT_CANCELED) {
                            WritableMap map = Arguments.createMap();
                            map.putString("succeed", intent.getExtras().getString("result"));
                            mDoneCallback.invoke(map);
                        } else {
                            WritableMap map = Arguments.createMap();
                            map.putString("err", intent.getExtras().getString("result"));
                            mDoneCallback.invoke(map);
                        }
                    }
                }
            }catch (Exception e){
                Log.e("",e.toString());
            }
        }
    };
    @ReactMethod
    public void startScan(final ReadableMap map, final Callback onDone){
        mDoneCallback = onDone;
        //5.再次链接地址,防止上下文被回收,导致主动传参2无效
        rnContext=getReactApplicationContext();
        String data= map.hasKey("data") ? map.getString("data") :"";
        Intent intent = new Intent(getCurrentActivity(), RNActivity.class);
        intent.putExtra("data", data);
        getCurrentActivity().startActivityForResult(intent, REQUEST_CODE);
    }
}

错误不足

请大佬私信指出。(心里默念,我是没错的)
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值