ReactNative系列ReactNativeReactNative

ReactNative调用原生模块的流程

2017-02-15  本文已影响33人  水山一村
用AndroidStudio打开你的RN项目下的android文件夹之后,等待编译完成。之后就可以开始进行调用原生模块的步骤了。
一、创建ToastModule继承ReactContextBaseJavaModule
a.实现getName()方法,该方法返回String类型的字符串,这个字符串是在JS里面调用Toast所用到的。
  public String getName() {
       return "RNToastAndroid";
   }
b.实现getConstans()方法,该方法给字符串赋值。
  public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURAION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURAION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }
c.定义一个React调用的方法 ,方法需要用@ReactMethod注解修饰。
  public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();

    }
二、创建一个ToastPackeage类实现ReactPackage类。
在方法createNativeModules()里面添加自定义的ToastModule,其他两个方法现在用不到。返回return Collections.emptyList();
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>(1);
        // 将我们自定义模块添加一个集合中.
        modules.add(new ToastAndroidModule(reactContext));
        return modules;
    }
三 创建toast.js
var { NativeModules } = require('react-native');
module.exports = NativeModules.ToastCustomAndroid;
把模块暴露出来
四、使用
var ToastAndroid  = require('ToastAndroid');
ToastAndroid.show('调用原生模块Toast例子', ToastAndroid.LONG);
上一篇下一篇

猜你喜欢

热点阅读