android rn技术论坛,Android与RN层的交互

Android跳转到RN页面

由于主客是以插件化的方式集成功能插件的，所以在主客中Android跳转到RN页面需要plugin、module和component。plugin、module不过多解释，component对应的是具体的js页面，要成功启动此页面，需要在对应的RN二方库中注册此页面。例如：

AppRegistry.registerComponent(‘MyDoctors’, () => MyDoctors);

注：至于为什么写一个RN的Component，然后系统就能启动，可以自己新建一个RN的工程，然后看下React Native启动流程分析。

Android与RN页面的交互

普通流程

RN如何调用原生Android的原生功能

rn调用原生的Android功能分为以下几步：

1，自定义原生实现类；

2，注册实现类；

3，RN的js部分调用原生；

首先，创建一个继承ReactContextBaseJaveModule的抽象类，此抽象类需要重写getName()函数用于返回一个字符串，这个字符串会在JavaScript端标记使用的模块。然后，可以编写一个函数暴露给javascript端，并且这个函数需要使用注解@ReactMethod进行标记。由于React Native的跨语言访问是异步进行的，所以想要给JavaScript返回一个值的唯一办法是使用回调函数或者发送事件。

例如，SomeModule：

package com.untitled;

import com.facebook.react.bridge.Callback;

import com.facebook.react.bridge.Promise;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import javax.annotation.Nonnull;

public class SomeModule extends ReactContextBaseJavaModule {

public SomeModule(@Nonnull ReactApplicationContext reactContext) {

super(reactContext);

}

@Nonnull

@Override

public String getName() {

return "SomeModule";

}

@ReactMethod

public void callbackMethod(String paramsFromJS, Callback ok, Callback error) {

boolean result = true;

if (result) {

ok.invoke("callback ok");

} else {

error.invoke("callback ok");

}

}

@ReactMethod

public void promiseMethod(String paramsFromJS, Promise promise){

boolean result = true;

if (result) {

promise.resolve("promise ok");

} else {

promise.reject("promise error");

}

}

}

然后，需要创建一个实现类用于实现ReactPackage接口，该接口中有三个抽象函数需要实现，分别是createNativeModules，createJSModules，createViewManagers。其中，ReactPackage实现类最关键的函数就是createNativeModules，在该函数中我们需要添加前一步创建的ReactContextBaseJavaModule子类用于构建ReactInstanceManager的实例，并通过调用 addPackage()函数，将上一步实现的ReactPackage添加进去。

例如，SomeReactPackage：

public class SomeReactPackage implements ReactPackage {

@Nonnull

@Override

public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {

List modules=new ArrayList<>();

SomeModule module = new SomeModule(reactContext);

modules.add(module);

return modules;

}

@Nonnull

@Override

public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {

return Collections.emptyList();

}

public List> createJSModules() {

return Collections.emptyList();

}

}

接下来，还需要在MainPackage类的getPackages()方法中添加注册这个自定义的模块。

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new SomeReactPackage() //注册自定义模块

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

}

}

一般来说，到此原生模块部分就可以了。接下来，在RN的js端就可以调用原生模块的函数了，流程还是比较清楚的。

export default class MainPage extends Component {

constructor(props) {

super(props);

this.callBack = this.callBack.bind(this);

this.promissCallback = this.promissCallback.bind(this);

}

callBack() {

NativeModules.SomeModule.callbackMethod('params', (result) => {

console.log('callBack ok======>' + result)

}, (error) => {

console.log('callBack error======>' + error)

});

}

promissCallback() {

NativeModules.SomeModule.promiseMethod('params').then((result) => {

console.log('Promiss ok======>' + result)

}).catch((error) => {

console.log('Promiss error======>' + result)

});

}

render() {

return (

回调方式

Promiss方式

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

bindButtonStyle: {

backgroundColor: '#42B3E3',

borderRadius: 22,

height: 44,

marginRight: 15,

marginLeft: 15,

marginTop: 20,

justifyContent: 'center'

},

submitStyle: {

alignSelf: 'center',

fontSize: 16,

color: 'white'

},

});

最后，启动上面的项目，既可以看到js调用原生部分输出的数据，如下图。

注意：boolean、int、double、float、String这些java的基本值类型都可以转，但是不能直接使用object类型进行相互调用。

本文同步分享在 博客“xiangzhihong8”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。