1.RN调用Android原生封装的代码

首先在AS中新建一个类继承自ReactContextBaseJavaModule
代码如下：

public class TestNativeModule extends ReactContextBaseJavaModule {    private ReactApplicationContext mContext;    public TestNativeModule(@Nonnull ReactApplicationContext reactContext) {        super(reactContext);        mContext = reactContext;    }    @Nonnull    @Override    public String getName() {        //rn通过这个名字调用方法        return "TestNativeModule";    }    //暴露给RN的方法    //函数不能有返回值    @ReactMethod    public void rnCallAndroid(String msg) {        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();    }}

AS新建TestReactPackage类继承自ReactPackage

public class TestReactPackage implements ReactPackage {    @Nonnull    @Override    public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {        List list = new ArrayList<>();        list.add(new TestNativeModule(reactContext));        return list;    }    @Nonnull    @Override    public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {        return Collections.emptyList();    }}

在MainApplication中getPackages方法中添加刚刚新建的TestReactPackage

@Override    protected List getPackages() {      return Arrays.asList(        ...              new TestReactPackage(),              ...      );    }

AS的内容就完成了，接下来在RN中调用，以一个单击事件为例，代码：

import {NativeModules} from "react-native";...{NativeModules.TestNativeModule.rnCallAndroid('调用成功!')}} >    单击调用原生方法...

2.RN引用Android的控件以及传递参数

引用控件大多是引用一些自定义的控件或者媒体播放器等，首先需要新建一个类继承自SimpleViewManager，这里以引用原生Button为例：

public class ButtonManager extends SimpleViewManager

然后和封装方法一样，需要新建package类集成ReactPackage不过这次是在createViewManagers方法中做修改：

public class ButtonPackage implements ReactPackage {    @Nonnull    @Override    public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {        return Collections.emptyList();    }    @Nonnull    @Override    public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {        List list = new ArrayList<>();        list.add(new ButtonManager());        return list;    }}

仍然需要在MainApplication中getPackages方法中添加：

@Override    protected List getPackages() {      return Arrays.asList(        ...              new ButtonPackage(),              ...      );    }

再reactnative中需要新建一个js文件将控件导出
AsButton：

import PropTypes from 'prop-types';import {requireNativeComponent, ViewPropTypes} from 'react-native';var iface = {    name: 'ButtonManager',    propTypes: {        text: PropTypes.string,        onClick:PropTypes.func,        ...ViewPropTypes, // include the default view properties    },};module.exports = requireNativeComponent('ButtonManager', iface,{ nativeOnly: { onClick: true }});

在需要引用的地方直接写标签即可：

 {                        //接受AS中传递的参数                        alert(event.nativeEvent.msg);                    }}                />

单击后的效果：

在AS中写buttonManager的时候没有设置宽高所以有点丑。。

ReactNative调用原生封装的代码和控件

文章目录

1.RN调用Android原生封装的代码

2.RN引用Android的控件以及传递参数

更多相关文章

随机推荐