从零学React Native之05混合开发

react

本篇文章,我们主要讨论如何实现Android平台的混合开发.

RN给Android端发送消息

首先打开Android Studio, Open工程, 在React Native项目目录下选择android子目录下的build.gradle文件打开。

React Native已经默认帮我们创建好了两个类MainApplication和MainActivity

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

//之前版本该代码是在MainActivity中

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

//开发者编写的React包管理器的实例需要在getPackages函数中被创建

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage()

);

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

}

public class MainActivity extends ReactActivity {

/**

* Returns the name of the main component registered from JavaScript.

* This is used to schedule rendering of the component.

*/

@Override

protected String getMainComponentName() {

return "AwesomeProject";

}

}

除了上面的代码,我们需要打通RN和原生代码, Android侧的接口类需要继承ReactContextBaseJavaModule

public class ExampleRNInterface extends ReactContextBaseJavaModule{

public ExampleRNInterface(ReactApplicationContext reactContext) {

super(reactContext);

}

// 这个函数的用途是返回原生代码模块的名称

@Override

public String getName() {

return "ExampleRNInterface";

}

@ReactMethod //必须有当前注解, 否则不能被RN调用, 函数也不能有返回值

public void handleMessage(String message){// 这是原生代码处理消息

//输出日志

Log.i("ExampleRNInterface","在RN接受到了消息:"+message);

}

}

getName()函数必须实现,这个函数的用途是返回原生代码模块的名称,在RN侧使用这个名称来调用原生代码模块提供的其他函数。
handleMessage 是自定义的函数 需要使用@ReactMethod标识,否则不能在RN中调用, 并且函数不能有返回值,因为调用的原生代码是异步执行的。

做完上面的操作,最后还需要注册开发者编写的原生代码模块,首先需要实现一个React包管理类,继承ReactPackage,并且实现createNativeModules方法,实际的注册过程将在createNativeModules函数被调用时发生。

如下,创建了ExampleReactPackage

代码:

/**

* 实现React包管理类

* Created by yull on 08/05.

*/

public class ExampleReactPackage implements ReactPackage {

//实际注册过程将在createNativeModules函数被调用时发生

@Override

public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

List<NativeModule> modules=new ArrayList<>();

modules.add(new ExampleRNInterface(reactContext));

return modules;

}

@Override

public List<Class<? extends JavaScriptModule>> createJSModules() {

return Collections.emptyList();

}

@Override

public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

}

咱们编写的React包管理器的实例需要在MainApplication.java中的ReactNativeHost里面的getPackages()中被创建,如下:

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

//之前版本是在MainActivity中

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

//开发者编写的React包管理器的实例需要在getPackages函数中被创建

@Override

protected List<ReactPackage> getPackages() {

return Arrays.asList(

new MainReactPackage(),

new ExampleReactPackage()//创建自己编写的包管理器

);

}

};

在React Native侧, 开发者可以调用Android侧的代码了:

import {

//...

NativeModules

} from 'react-native';

let ExampleRNInterface=NativeModules.ExampleRNInterface;

class AwesomeProject extends Component {

render() {

return (

<View style={styles.container}>

<Text style={styles.welcome}

onPress={this.buttonPressed}>

Welcome to React Native!

</Text>

</View>

);

}

buttonPressed(){

NativeModules.ExampleRNInterface.handleMessage('testMessage');

}

}

const styles = StyleSheet.create({

//...

});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);


点击屏幕上的文字就会在Android Studio中看到日志了

PS: 修改完了Andorid端代码,貌似需要编译一回,才能生效, 我直接运行了下Android代码,然后reloadJS就生效了

RN与Android原生端界面的切换

直接在Android端创建新的Activity, 然后修改上面的ExampleRNInterface

public class ExampleRNInterface extends ReactContextBaseJavaModule{

ReactApplicationContext reactContext;

public ExampleRNInterface(ReactApplicationContext reactContext) {

super(reactContext);

this.reactContext=reactContext;//保存上下文

}

// 这个函数的用途是返回原生代码模块的名称

@Override

public String getName() {

return "ExampleRNInterface";

}

@ReactMethod //必须有当前注解, 否则不能被RN调用, 函数也不能有返回值

public void handleMessage(String message){// 这是原生代码处理消息

//输出日志

Log.i("ExampleRNInterface","在RN接受到了消息:"+message);

Intent intent=new Intent(reactContext, Main2Activity.class);

intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

reactContext.startActivity(intent);

}

}

运行结果:

Android发送消息给RN

首先Android侧修改ExampleRNInterface

public class ExampleRNInterface extends ReactContextBaseJavaModule{

...

@ReactMethod //必须有当前注解, 否则不能被RN调用, 函数也不能有返回值

public void handleMessage(String message){// 这是原生代码处理消息

sendMessage("I am Android!");

}

//发送消息

public void sendMessage(String message){

reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

.emit("Android2RN",message);

}

}

React Native侧

class AwesomeProject extends Component {

componentWillMount() {

console.log('componentWillMount');

//监听消息和Android端保持一致

DeviceEventEmitter.addListener('Android2RN',this.handleMessage);

}

handleMessage(message){

console.log(message);

}

...

}

运行结果 , 当点击屏幕文字的时候 控制台就会打印Android侧返回的日志

监听Android onActivityResult事件

开发者也可以选择直接在Android与React Native的接口类中监听启动Activity的结果。如ExampleRNInterface 实现ActivityEventListener

常量

混合开发中,可以实现getContants的成员函数, 把Android原生的常量暴漏给RN侧,这种方法对混合开发有一定的用处

    @Override

public Map<String, Object> getConstants() {

final Map<String,Object> constants=new HashMap<>();

constants.put("constantName",contantValue);

return constants;

}

在RN侧, 开发者可以通过nativeModuleName.constantName来访问被导出的常量

更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。

以上是 从零学React Native之05混合开发 的全部内容, 来源链接: utcz.com/z/383217.html

回到顶部