reactNative调用原生Java，回调使用Callback/Promise

在开发过程中，免不了使用原生Java，记录一下。

使用场景：

import {NativeModules} from 'react-native';

class Test extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    NativeModules.ToastModule.show('hello', 1000, (msg) => {
      console.log(10, msg);
    });

    NativeModules.ArrModule.getArr('hello').then((msg) => {
      console.log(20, msg);
    });
  }

  render() {
    return undefined;
  }
}

Java部分，需要创建3个文件：ToastModule.java、ArrModule.java和CustomPackage.java

第一个，调用系统弹窗，Callback回调数据：

// ToastModule.java

package com.Test;// 改成自己的包名

import android.widget.Toast;

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

public class ToastModule extends ReactContextBaseJavaModule {
    ToastModule(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "ToastModule"; // ReactNative调用时的名字。
    }

    @ReactMethod
    public void show(String msg, int duration, Callback callback) {
        // 弹出层
        Toast.makeText(getReactApplicationContext(), "参数:" + msg, duration).show();

        // 回调函数
        callback.invoke(msg);
    }
}

第二个，处理组数，Promise回调数据：

// ArrModule.java

package com.Test;// 改成自己的包名

import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableArray;
import com.facebook.react.modules.core.DeviceEventManagerModule;

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

public class ArrModule extends ReactContextBaseJavaModule {
    private ReactApplicationContext reactContext;
    private DeviceEventManagerModule.RCTDeviceEventEmitter eventEmitter;

    ArrModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "ArrModule"; // ReactNative调用时的名字。
    }

    @ReactMethod
    public void getArr(String msg, final Promise promise) {
        try {
            List<String> returnSet = new ArrayList<String>();

            returnSet.add("abc");
            returnSet.add("123");
            returnSet.add(msg);

            String[] returnArray = new String[returnSet.size()];
            returnArray = returnSet.toArray(returnArray);

            WritableArray promiseArray = Arguments.createArray();

            for (String s : returnArray) {
                promiseArray.pushString(s);
            }

            promise.resolve(promiseArray);
        } catch (Exception e) {
            promise.reject(e);
        }
    }
}

第三个，

// CustomPackage.java

package com.Test;

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;

public class CustomPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext)); // 11
        modules.add(new ArrModule(reactContext));   // 22
        return modules;
    }

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

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

最后，加到主函数：

// MainApplication.java

package com.Test;

...

import com.facebook.react.shell.MainReactPackage;

...

public class MainApplication extends Application implements ReactApplication {
    private Context ctx;

    //private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        ...

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new CustomPackage()    // 加进来就OK
            );
        }

        ...

    };
}

 

来源：https://my.oschina.net/u/3398936/blog/3130240