react native与原生native交互

现如今React-Native尚未成熟，在开发过程中自然少不了与原生native的交互与数据传递。学习过程中查了一些资料，主要有以下三种方式：

方式	优点	缺点
事件方式：RCTDeviceEventEmitter	可任意时刻传递，Native主导控制	个人觉得此种方式缺点小
CallBack回调方式	JS调用一次，Native返回一次	CallBack为异步操作，返回时机不确定
Promises 方式	JS调用一次，Native返回一次	每次使用需要JS调用一次

步骤：

1、JS文件导入NativeModules组件

import {NativeModules} from 'react-native';

2、在android中创建一个类继承自ReactContextBaseJavaModule,并定义一些native方法供RN调用。

public class ExampleInterface extends ReactContextBaseJavaModule {


    private ReactApplicationContext mContext;

    public ExampleInterface(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext = reactContext;
    }

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

下面的NativeModules.ExampleInterface就是获取这个类的实例，而getName就是返回该类的名字

3、在你自定义的ReactPackage的实现类的createNativeModules方法里添加ExampleInterface的实例并返回

public class AnExampleReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        ArrayList<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new ExampleInterface(reactContext));
        return nativeModules;
    }    

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

    public List<Class<? extends JavaScriptModule>> createJSModules(){
        return Collections.emptyList();
    }
}

4、然后在你自定义的ReactApplication的实现类的getPackages方法里返回AnExampleReactPackage的实例

public class ReactApp extends Application implements ReactApplication {

    private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    /*将我们自定的包管理加入*/
                    new AnExampleReactPackage()
            );
        }

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

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

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

}

交互方式的具体使用：

1 RCTDeviceEventEmitter：

/**
 * 向RN发送消息
 *
 * @param msg
 */
private void sendMsgToRN(String msg) {
    mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("AndroidToRNMessage", msg);
}

/**
 *JS接收回调
 */
 componentWillMount() {
     DeviceEventEmitter.addListener('AndroidToRNMessage', this.handleAndroidMessage.bind(this));
 }
 
 
 handleAndroidMessage(androidMeg) {
     this.setState({msg: androidMeg});
 }

2 CallBack回调：

/**
 * native端让JS端调用的方法，并将msg回调给JS
 */
@ReactMethod
public void handleCallback(String msg, Callback callback) {
    callback.invoke(msg);
}

/**
 * JS端调用native端handleCallback方法
 */
NativeModules.ExampleInterface.handleCallback('JS Callback', (msg) => {
        alert(msg);
    });

3 Promises 方式：

/**
 *ative端让JS端调用的方法，用Promise时，Promise参数需要放在最后一个参数里，否则JS接搜不到消息
 */
@ReactMethod
public void handlePromise(String msg, Promise promise) {
    try {
        promise.resolve(msg);
    } catch (Exception e) {
        promise.reject(e);
    }
}

/**
 * NativeModule.ExampleInterface.handlePromise 返回的是一个Promise对象，
 * JS端通过then接口来获取Promise的数据。
 */
NativeModules.ExampleInterface.handlePromise('Promise')
.then((msg) => { alert(msg); })
.catch((error) => { console.log(error) });

react native与原生native交互

猜你喜欢