ReactNative 调用Android 原生（一）——原生模块(二)

ReactNative 调用Android 原生（一）——原生模块(一)在上次文章中我们只是简单的尝试了rn给Android原生传递参数调用Android方法所以这次介绍一下Android 如何给RN回传参数，也可以说是回调函数。

前言

Android给RN回传参数主要有一下几种方式
1、Callback
2、Promises
3、RCTDeviceEventEmitter（适用于多线程）
为了不啰嗦地快速学会使用，这里只介绍第1、3种，其他2种也是一样的用法，其他2种的使用参考官网：​​​https://reactnative.cn/docs/native-modules-android/​​​ 顺便写了下开启原生页面
ps：主要觉得文章写太长的话，读起来前面说的啥都已经忘记了。

使用

还是跟ReactNative 调用Android 原生（一）——原生模块(一)中步骤一样，先创建RN项目，我就直接接着上次的来了。

1、继承ReactContextBaseJavaModule

TestModules

public class TestModules extends ReactContextBaseJavaModule {
        private ReactApplicationContext mContext;

        public TestModules(ReactApplicationContext reactContext) {
            super(reactContext);
            mContext = reactContext;
        }

        @Override
        public String getName() {
            //注意 这里的名字才是RN中被调用的名字
            return "TestModules";
        }

    /**
     * 调用Android原生模块，可传递的参数类型如下
     * Boolean -> Bool
     *Integer -> Number
     * Double -> Number
     * Float -> Number
     * String -> String
     * Callback -> function
     * ReadableMap -> Object
     * ReadableArray -> Array
     * @param msg
     */
    @ReactMethod
    public void Toasts(ReadableMap msg) {
        ReadableNativeMap map= (ReadableNativeMap) msg;
        HashMap map2=map.toHashMap();
        Toast.makeText(mContext, (String) map2.get("name"), Toast.LENGTH_SHORT).show();
    }

    /**
     *Android 传递参数给RN
     * @param msg
     * @param callback
     */
    @ReactMethod
    public void ToastFinished(String msg, Callback callback) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
        WritableMap map = Arguments.createMap();
        map.putInt("id", 1);
        map.putString("name", "小明");
        WritableArray array = Arguments.createArray();
        array.pushString("哈哈1");
        array.pushString("哈哈2");
        map.putArray("sub",array );
        callback.invoke(map);
    }

    /**
     * Android 传递参数给RN
     */
    @ReactMethod
    public void sendEvent(){
        WritableMap map = Arguments.createMap();
        map.putInt("id", 1);
        map.putString("name", "路人甲");
        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("sendEvent",map);
    }

    @ReactMethod
    public void startActivity(){
        Intent intent=new Intent(mContext,TestModuleActivity.class);//记得添加manifest
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mContext.startActivity(intent);
    }
}

2、实现ReactPackage

public class TestPackages implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new TestModules(reactContext));
        return nativeModules;
    }

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

3、添加到MainApplication中

public class MainApplication extends Application implements ReactApplication {

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

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new TestPackages()
            );
        }

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

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

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

4、调用

export default class App extends Component<Props> {
  constructor() {
    super();
    this.state = {
      name: 'To get started, edit App.js',
      sendEvent: 'Send Event'
    }
  }

  toast = () => {
    let obj = {
      id: 1,
      name: "xiaohong"
    };
    NativeModules.TestModules.Toasts(obj);
  };
  toastFinishCallback = () => {
    NativeModules.TestModules.ToastFinished("调用了原生并带有回调", (result) => {
      this.setState({
        name: result.name
      });
    });
  };

  sendEvent = () => {
    NativeModules.TestModules.sendEvent();
  };

  componentWillMount() {
    DeviceEventEmitter.addListener('sendEvent', (e: Event) => {
      this.setState({
        sendEvent: e.name
      });
    })
  };

  startActivity = () => {
    NativeModules.TestModules.startActivity();
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}
              onPress={this.toast}
        >Welcome to React Native!</Text>
        <Text style={styles.instructions}
              onPress={this.toastFinishCallback}
        >{this.state.name}</Text>
        <Text style={styles.instructions}
              onPress={this.sendEvent}
        >{this.state.sendEvent}</Text>

        <Text
          style={styles.instructions}
          onPress={this.startActivity}
        >点击开启activity</Text>
      </View>
    );
  }
}

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