ReactNative与原生android应用数据交互

开启真机调试

• 在AndroidManifest.xml中增加设置页面

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

• 在真机手机上摇一摇调出设置菜单->Dev Settings->Debug server host & port for device
• 设置电脑上的ip地址和端口号(8081)

如果编译出现jsr305的错误,在app的build.gradle文件中android{}中添加

configurations.all {    resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'}

ReactNative传数据给原生应用

Android原生修改

• 新建一个ToastModule类继续extends ReactContextBaseJavaModule

package com.example.gjy.testrn;

import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by gjy on 16/9/18.
 * js传数据到原生应用
 */

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 "ToastModule";   //这里的名称要和js中调用的一样
    }

    @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;
    }

    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }


    /**
     * 这个方法js会调用到
     *
     * @param message  js传过来的到的数据
     * @param duration
     */
    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

• 新建一个AnExampleReactPackage(名称随意) 实现ReactPackage接口

package com.example.gjy.testrn;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * Created by gjy on 16/9/18.
 * 把自定义的module添加到package中
 */

public class AnExampleReactPackage implements ReactPackage {

    /**
     * 在这个方法添加module
     *
     * @param reactContext
     * @return
     */
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        //modules.add(new CustomIntentModule(reactContext));
        return modules;
    }

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

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

• 修改ReactActivity

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new AnExampleReactPackage())    //添加自己新建的module
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "ModulesDemo", null);

        setContentView(mReactRootView);
    }

修改ReactNative(index.android.js)

添加
var { NativeModules } = require('react-native');

在需要传递给原生应用的地方调用方法，例如

onPress={()=>NativeModules.ToastModule.show("我是ToastCustomAndroid弹出消息",NativeModules.ToastModule.SHORT)}

注意：这里NativeModules.ToastModule中的ToastModule要和原生类中的getName()返回的值一样