react-native 添加 Toast 模块

1.创建一个原生模块开始。一个原生模块是一个通常继承 ReactContextBaseJavaModule 类的 Java 类,并且实现了 JavaScript 需要实现的方法

public class AliToastAndroid extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

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

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

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

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

注意:

1.ReactContextBaseJavaModule  需要一个叫做  getName  的方法被实现。这个方法的目的就是返回在 JavaScript 里面表示这个类的叫做  NativeModule  的字符串的名字。在这里我们调用  AliToastAndroid
 因此我们可以在 JavaScript 里面使用 
React.NativeModules.AliToastAndroid   来得到它。

2.一个可选的叫做 getConstants 的方法会将传递给 JavaScript 的常量返回。这个方法的实现并不是必须的,但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要。

3.给 JavaScript 暴露一个方法,一个 Java 方法需要使用 @ReactMethod 来注解。桥接的方法的返回值类型总是void。React Native 的桥接是异步的,因此将一个结果传递给 JavaScript 的唯一方式就是使用回调函数或者调用事件


2.注册模块:

public class AnExampleReactPackage extends MainReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = super.createNativeModules(reactContext);

        //new an Array intstead of abstract List exception
        List<NativeModule> result = new ArrayList<>();
        result.addAll(modules);

        result.add(new AliToastAndroid(reactContext));
        return result;
    }
}

 mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new AnExampleReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

3. 在你的 JavaScript 文件里面你可以像下面这样调用方法:

var AliToastAndroid = React.NativeModules.AliToastAndroid
    AliToastAndroid.show('444444', AliToastAndroid.LONG);

你可能感兴趣的:(模块,react-native)