ReactNative 呼叫Android 原生（一）——原生模組(一)：https://blog.csdn.net/danfengw/article/details/83862623 在上次文章中我們只是簡單的嘗試了rn給Android原生傳遞引數呼叫Android方法所以這次介紹一下Android 如何給RN回傳引數，也可以說是回撥函式。

前言

Android給RN回傳引數主要有一下幾種方式 1、Callback 2、Promises 3、RCTDeviceEventEmitter（適用於多執行緒） 為了不囉嗦地快速學會使用，這裡只介紹第1、3種，其他2種也是一樣的用法，其他2種的使用參考官網：https://reactnative.cn/docs/native-modules-android/

使用

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