ReactNative与Android原生交互

ReactNative调用原生

通过原生向ReactNative中注入方法来实现。

第一步：自定义Module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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 "Toast";
  }

  @ReactMethod
  public void show(final String message) {
    UiThreadUtil.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        Toast.makeText(getReactApplicationContext(), message, Toast.SHORT).show();
      }
    });
  }
  
    @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;
  }
}

@ReactMethod注解的方法才会被注入到RN中，getConstants用于向RN注入常量。

被@ReactMethod注解方法支持的参数类型
1
2
3
4
5
6
7
8
Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

第二步：自定义Package

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class ToastPackage implements ReactPackage {

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

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

第三步：注入到ReactNative

ReactNative集成原生则是在对应的MainApplication中通过getPackages方法注入。

1
2
3
4
5
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ToastPackage());
}

若是原生集成ReactNative则是在构建ReactInstanceManager时通过ReactInstanceManager.Builder的addPackage注入。

1
2
3
4
5
6
7
mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(getApplication())
              .setBundleAssetName("index.android.bundle")
              .addPackage(new MainReactPackage())
              .addPackage(new ToastPackage())
              .setInitialLifecycleState(LifecycleState.RESUMED)
              .build();

第四步：在RN中调用

1
2
3
4
5
import {NativeModules} from 'react-native';

const Toast = NativeModules.Toast;

Toast.show("Toast", Toast.SHORT);

原生回调ReactNative

Callbacks

原生Module也支持Callback参数类型，用于返回结果到Js。

1
2
3
4
5
6
7
8
9
10
11
12
13
public class LoginModule extends ReactContextBaseJavaModule{
···
	@ReactMethod
	public void login(String acount,String pwd,
			 Callback error,
			 Callback success){
		if (login(acount,pwd)){
			success.invoke("1");
		}else{
			error.invoke("0");
		}
	}
}

Js

1
2
3
4
5
Login.login("123","456",(msg) => {
    console.log(msg);
  },(msg) => {
    console.log(msg);
});

参考链接

native-modules-android

React Native 原生模块和 JS 模块交互

ReactNative实现js和原生交互