React Native封装原生模块

参考了
原生模块 - React Native 中文网

封装Android原生模块的基本步骤：
1.创建一个ReactContextBaseJavaModule的子类，并实现必需方法。
2.创建一个ReactPackage的子类,并将1中创建的Module添加到其中；再将自己的ReactPackage添加到工程里的ReactApplication。
3.封装JS模块。
4.在JS里使用调用封装好的模块。

下面贴上具体代码：
创建一个ToastModule 继承ReactContextBaseJavaModule 。

public class ToastModule extends ReactContextBaseJavaModule {

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

    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "ToastExample";
    }

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

    /**
     * 要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。方法的返回类型必须为void。
     * @param message
     * @param duration
     */
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

创建ToastPackage 实现ModulePackage

public class MyReactPackage  implements ReactPackage {

    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.asList(
                new ToastModule(reactContext)
        );
    }

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

注册Package

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

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

        @Override
        protected String getJSMainModuleName() {
            return "index";
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
}

创建ToastExample.js文件

import { NativeModules } from 'react-native';

export default NativeModules.ToastExample;

在App.js中调用

import React, {Component} from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import ToastExample from './ToastExample';


const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
    render() {
        ToastExample.show('我是弹窗', ToastExample.SHORT);
        return (
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});