react-native與原生三種交互模式

Android 代碼

react-native與原生三種交互模式

  /**
     * RCTDeviceEventEmitter方式
     *
     * @param reactContext
     * @param eventName    事件名
     * @param params       傳慘
     */
    public void sendTransMisson(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, params);

    }

    /**
     * CallBack方式
     *
     * @param name
     * @param callback
     */
    @ReactMethod
    public void callBackTime(String name, Callback callback) {
        callback.invoke(getTimeMillis());
    }


    /**
     * Promise方式
     * @param name
     * @param promise
     */
    @ReactMethod
    public void sendPromiseTime(String name, Promise promise) {
        WritableMap writableMap=new WritableNativeMap();
        writableMap.putString("age","20");
        writableMap.putString("time",getTimeMillis());
        promise.resolve(writableMap);

    }

js代碼

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    DeviceEventEmitter,
    NativeModules,
    ToastAndroid
} from 'react-native';

export default class AllureDataTransmisson extends Component {

    componentWillMount() {
        DeviceEventEmitter.addListener('EventName', function (msg) {

            console.log(msg);

            ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + msg.key, ToastAndroid.SHORT)

        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}
                      onPress={this.getDeviceEventEmitterTime.bind(this)}
                >
                    RCTDeviceEventEmitter獲取時間
                </Text>
                <Text style={styles.welcome}
                      onPress={this.getCallBackTime.bind(this)}
                >
                    CallBack獲取時間
                </Text>
                <Text style={styles.welcome}
                      onPress={this.getPromiseTime.bind(this)}
                >
                    Promise獲取時間
                </Text>
            </View>
        );
    }

    getDeviceEventEmitterTime() {
        NativeModules.TransMissonMoudle.getTime();
    }

    getCallBackTime() {
        NativeModules.TransMissonMoudle.callBackTime("Allure",
            (msg) => {
                console.log(msg);
                ToastAndroid.show("CallBack收到消息:" + "\n" + msg, ToastAndroid.SHORT)

            }
        );

    }

    getPromiseTime() {
        NativeModules.TransMissonMoudle.sendPromiseTime("Allure").then(msg=> {
            console.log("年齡:" + msg.age + "/n" + "時間:" + msg.time);
            ToastAndroid.show("Promise收到消息:" + "\n" + "年齡:" + msg.age + "時間:" + msg.time, ToastAndroid.SHORT)

            this.setState({
                age: msg.age,
                time: msg.time,
            })
        }).catch(error=> {
            console.log(error);
        });
    }
}

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,
    },
});

AppRegistry.registerComponent('AllureDataTransmisson', () => AllureDataTransmisson);