RN和原生Android混合开发之相互调用

1 官网上的原生模块理解

官网上有原生模块这一节,我的理解是这一节要教给我们,如何在RN中的JS代码中调用原生的JAVA代码,同样包括调用Toast和Dialog,这种我们已经写好的组件,但不包括View,View这种在另外一节中说道了。
首先需要知道的就是ReactContextBaseJavaModule

在java代码里面,继承了这个方法,就可以在里面写暴露给RN JS的方法,如下:

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }

方法的上面一定会有 @ReactMethod标示,整个流程就不在这说,可以去中文网上看。

http://reactnative.cn/docs/0.38/native-modules-android.html#content

下面我说一下,在这里面关于activity相互调用的问题。

1 JS 调用原生activity

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);

        mContext = reactContext;
    }
    @ReactMethod
    public void rnCallNative(String msg) {
        Intent jumpIntent = new Intent(mContext, MainActivity.class);
        mContext.startActivity(jumpIntent);
    }

上面看着应该比较清晰,mContext就是本类中的context,然后执行java的startActivity方法,就能调用原生的activity,其中带参数啥的,会原生的应该都会。其实还是JAVA调JAVA,只是JS可以调用这个方法而已。

2 原生 调用JS Activity

这个时候,就需要理解RN这个东西,RN中的这句代码

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

我的理解就是一个activity,实际上,我们也是可以改造的,改造成framwork或layout等,这个需要有经验的去做。
理解了这一点就比较容易做到,在java代码中会有这么一个类。

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorldApp";
    }

这里的HelloWorldApp,和上面注册的必须一样,这样的话,就理解了,如果你调用这个MainActivity,实际上就是进入到RN里面的index.android.js,这个里面了,然后可以根据带入的参数,选择到底绘制哪个画面。

jumpIntent = new Intent(context, MainActivity.class);
jumpIntent.putExtra("XXX", XXX);
context.startActivity(jumpIntent);

这样,你就携带参数,调用了这个activity。
然后呢,就可以使用一个回调方法,把我们携带的参数,从RN 的JS里面拿到

  @ReactMethod
    public void dataToJS(Callback successBack, Callback errorBack){
        try{
            Activity currentActivity = getCurrentActivity();
            String XXXX = currentActivity.getIntent().getStringExtra("XXXX");

            successBack.invoke(XXXX);
        }catch (Exception e){
            errorBack.invoke(e.getMessage());
        }
    }

这个是写在JS调用的方法里面的,这里getCurrentActivity,拿到的就是MainActivity的数据。
然后JS就可以调用了

componentDidMount(){
     //进行从Activity中获取数据传输到JS
     NativeModules.MyNativeModule.dataToJS((XXXX) => {
                        this.setState({
                           XXXXXX:XXXXXXX,
                         })
                  },
                   (result) => {
                    ToastAndroid.show('JS界面:错误信息为:'+result,ToastAndroid.SHORT);
                  })
  }

在JS中的 componentDidMount方法中调用了JAVA代码以后,就可以拿到Activity的数据,然后,我们就可以判断要绘制哪个界面了。

整体思路就这样,很简单,还有其他的相互消息传递,监听,后续都会说到。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值