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

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

时隔四季,我重新开始了我的文章更新,so do you miss me?
Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第1张图片

前言

从工作到现在,我是个四年的程序员了,但是觉得自己踩的坑真的是填都填不完。所以决定把我踩的坑,系统性的归纳和记录,所以CSDN,爷回来了。
Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第2张图片
错了,是干净的爷回来了。
Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第3张图片

最近开发心得

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

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

1.下载Node.js

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

  2. 环境变量配置
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第5张图片

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

npm -v
  1. 出现如下界面就说明安装好了
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第6张图片

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. 导入成功后如下
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第7张图片

  3. 然后只留android文件夹把react-native-wheel-picker这个文件夹丢到Android项目中
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第8张图片
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第9张图片

  4. 项目的settings.gradle中添加导入
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第10张图片

  5. 项目中app的build.gradle中添加导入
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第11张图片

  6. 在react-native-wheel-picker中build.gradle如果有自己引用第三方rn框架就要换成自己的rn框架
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第12张图片

  7. 在Application中引用Package方法
    Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第13张图片

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);
    }
}

错误不足

请大佬私信指出。(心里默念,我是没错的)
Android引用RN第三方控件,Android和RN互调方式,最近开发心得_第14张图片

你可能感兴趣的:(Android,android,react,native)