react-native调用Android原生模块

从Javascript发起一个Toast消息

1. 创建一个CustomToast.java文件

public class CustomToast extends ReactContextBaseJavaModule {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public CustomToast(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "CustomToast";
    }

    /**
     * 一个可选的方法getContants返回了需要导出给JavaScript使用的常量。
     * 它并不一定需要实现，但在定义一些可以被JavaScript同步访问到的预定义的值时非常有用。
     */
    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap();
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);

        return constants;
    }

    /**
     * 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。
     * 方法的返回类型必须为void。React Native的跨语言访问是异步进行的，
     * 所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件
     * @param message
     * @param duration
     */
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }


}

2. 下面的参数类型在@ReactMethod注明的方法中，会被直接映射到它们对应的JavaScript类型(例如上面的show方法，它被标明了@ReactMethod，所以它的参数会映射成下面这样)。

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

3. 注册模块 MyToastReactPaket.java

public class MyToastReactPaket implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CustomToast(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

4. 在MainApplication中添加如下

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new MyToastReactPaket()
      );
    }

5. 增加js代码 JavaScript端的模块封装 创建一个CustomToast.js

'use strict'
import {NativeModules} from 'react-native';
export default NativeModules.CustomToast;

6.测试例子 更改app.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import CustomToast from './CustomToast';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <Text onPress={() => CustomToast.show('12313123',CustomToast.SHORT)}>弹出Toast</Text>
    );
  }