本文对于UI组件的封装，主要从两部分介绍：
- 基本视图封装
- 事件处理
demo中是封装原生Button组件，记录使用过程及需要注意的问题。
一、基本视图封装
- 创建一个ViewManager的子类。
- 实现createViewInstance方法。
- 导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
- 把这个视图管理类注册到应用程序包的createViewManagers里。
- 实现JavaScript模块。
1.1创建一个ViewManager的子类
SimpleViewManager是ViewManager的派生类，通过该类创建和管理视图对象。
public class RCTButton extends SimpleViewManager<Button> {
private static final String EVENT_NAME_ONCLICK = "onClick";
private ThemedReactContext mContext;
@Override
public String getName() {
return "RCTButton";
}
}
SimpleViewManager<Button>中的Button是需要封装的UI组件，该组件可以是自定义组件。
实现方法getName，返回值RCTButton在实现JavaScript模块时需要用到。
1.2实现createViewInstance方法
RCTButton类中，实现createViewInstance方法，创建、返回View对象。
@Override
protected Button createViewInstance(ThemedReactContext reactContext) {
this.mContext = reactContext;
Button button = new Button(reactContext);
return button;
}
1.3导出视图的属性设置器
使用@ReactProp（或@ReactPropGroup）注解,这里介绍@ReactProp。
@ReactProp(name = "text")
public void setText(Button button,String text){
button.setText(text);
}
- name="text" : name对应的值是在js代码中使用该封装组件时的属性名。
1.4 视图管理类注册
//自定义RTCViewPackage
public class RTCViewPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Collections.EMPTY_LIST;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(new RCTButton());
}
}
实现了两个方法，在createViewManagers方法中添加自定义的视图管理类RCTButton。
自定义RTCViewPackage类需要在MainApplication中添加：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RTCViewPackage()
);
}
1.5 实现JavaScript模块
'use strict';
import React, { Component } from 'react';
import {
requireNativeComponent
} from 'react-native';
let RTCBtn = requireNativeComponent("RCTButton",RCTButton);
export default class RCTButton extends Component {
render() {
return <RTCBtn {...this.props}/>;
}
}
- requireNativeComponent关联js和原生组件，方法中的两个参数：第一个参数是JS模块名称，第二个参数是原生封装该UI组件时的名称，对应
getName返回值。 - {...this.props} 必须有，否则组件不显示。
二、事件处理
当一个原生事件发生的时候，它应该也触发JS端视图上的事件，这两个视图会依据getId()而关联在一起。（可以理解为原生层View给JS层View发送消息--个人理解O(∩_∩)O~）
2.1 事件映射
重写getExportedCustomDirectEventTypeConstants方法，将原生事件name映射到js事件name，类似于key-value。
public class RCTButton extends SimpleViewManager<Button> {
private static final String EVENT_NAME_ONCLICK_NATIVE = "nativeClick";
private static final String EVENT_NAME_ONCLICK_JS = "jsClick";
@Nullable
@Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
return MapBuilder.<String,Object>builder().put(EVENT_NAME_ONCLICK_NATIVE,MapBuilder.of("registrationName",EVENT_NAME_ONCLICK_JS)).build();
}
}
2.2 接受事件，传递给JS层
在RCTButton类中重写addEventEmitters方法，添加点击事件监听。
@Override
protected void addEventEmitters(final ThemedReactContext reactContext, final Button view) {
super.addEventEmitters(reactContext, view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
WritableMap data = Arguments.createMap();
data.putString("msg","点击btn2");
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
view.getId(),
EVENT_NAME_ONCLICK,
data
);
}
});
}
关键代码：reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( view.getId(), EVENT_NAME_ONCLICK_NATIVE, data ); } });
该代码的类似于：view组件接收到了事件，传递给JS层。
receiveEvent的第一个参数是关联原生组件和js组件，第二个参数是事件映射中的key值，第三个参数是传递给js层的数据。
另外，如果不重写addEventEmitters方法，在createViewInstance方法中发送事件给js端也可。但是优先级低于addEventEmitters。
@Override
protected Button createViewInstance(final ThemedReactContext reactContext) {
this.mContext = reactContext;
final Button button = new Button(reactContext);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//创建数据传递信使，雷士android中的bundle
WritableMap data = Arguments.createMap();
data.putString("msg","点击了btn");
mContext.getJSModule(RCTEventEmitter.class).receiveEvent(
button.getId(),
EVENT_NAME_ONCLICK_NATIVE,//通过该string，查找js层对应的方法名
data
);
}
});
return button;
}
2.3 js模块
'use strict';
import React, { Component } from 'react';
import {
requireNativeComponent
} from 'react-native';
let RTCBtn = requireNativeComponent("RCTButton",RCTButton,{nativeOnly:{jsClick:true}});
export default class RCTButton extends Component {
_onClick = (event)=>{
if (!this.props.onPress){
return;
}
//使用event.nativeEvent.msg获取原生层传递的数据
this.props.onPress(event.nativeEvent.msg);
}
render() {
return <RTCBtn
{...this.props} jsClick = {(event)=>this._onClick(event)}/>;
}
}
关键代码：
- {nativeOnly:{jsClick:true}} ： 故名思议，nativeOnly--只在原生中生效的属性，该属性将不再propType中定义，若不添加编译时将会报错。
- jsClick = {(event)=>this._onClick(event)} ：通过event可以获取到原生传递的数据
- jsClick 对应原生代码中的事件映射中的
private static final String EVENT_NAME_ONCLICK_JS = "jsClick"值
2.4 使用JS模块**
render() {
return (
<View style={styles.container}>
<RCTButton text="原生btn" style = {{width:80,height:40}} onPress = {
(msg)=>{
alert("原生传递的数据为："+msg)}}/>
</View>
);
}
使用过程中，添加了onPress属性。
拓展知识：
1.原生发送消息，js层注册监听
reactContext
.getJSModule(RCTNativeAppEventEmitter.class)
.emit(eventName, params);
//eventName:String JS中通过eventName接收
//params:WritableMap 需要传递的参数
js层接收：
NativeAppEventEmitter.addListener('onVolumeChange', () => {})
//onVolumeChange =>原生代码中的eventName
2.自定义组件时，js层给native层发送消息
native层需重写getCommandsMap和receiveCommand方法。
/**
* 接收交互通知
* @return
*/
@Nullable
@Override
public Map<String, Integer> getCommandsMap() {
return MapBuilder.of("handleTask",1);
}
//根据RN层发送的对应通知ID，处理对应任务请求
@Override
public void receiveCommand(ImageView root, int commandId, @Nullable ReadableArray args) {
switch (commandId){
case 1:
if(args != null) {
String name = args.getString(0);//获取第一个位置的数据
Toast.makeText(context, "收到RN层的任务通知...", Toast.LENGTH_SHORT).show();
}
break;
default:
break;
}
}
js层发送任务通知
import { UIManager, findNodeHandle } from 'react-native';
sendNotification() {
//向native层发送命令
UIManager.dispatchViewManagerCommand(
findNodeHandle(this.refs.rctBtn),
UIManager.RCTButton.Commands.handleTask, // Commands后面的值与原生层定义的`handleTask`一致
["from React Native"] // 向原生层传递的参数数据,数据形如：["第一个参数","第二个参数",...]
);
}
render() {
return <RTCBtn
ref = 'rctBtn'
{...this.props} onClick = {(event)=>this._onClick(event)}/>;
}
