1.android端集成SimpleViewManager<这里写组件的名字也可以是自定义过的组件>
2.复写createViewInstance通过这个方法来返回需要使用的原生的view
@Override
protected Button createViewInstance(ThemedReactContext reactContext) {
this.mContext = reactContext;
Button button = new Button(reactContext);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
WritableMap map = Arguments.createMap();
map.putString("msg","我是来自原生view的点击显示");
ReactContext context = (ReactContext)button.getContext();
context.getJSModule(RCTEventEmitter.class).receiveEvent(textView.getId(),"myclicked",map);
}
});
return button;
}
3.使用@ReactProp导出的是js设置的属性
@ReactProp(name = "msg")
public void setText(Button button,String text){
button.setText(text);
}
4.在android原生端定义了使用的属性还需要定义一个类实现ReactPackage
//自定义RTCViewPackage
public classRTCViewPackage implements ReactPackage{
@OverridepublicListcreateNativeModules(ReactApplicationContext reactContext){returnCollections.EMPTY_LIST; } @OverridepublicListcreateViewManagers(ReactApplicationContext reactContext){returnArrays.asList(new RCTButton()); }}
然后在MainApplication中的getPackages中进行注册
5 js端中引用原生端定义的view
'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和原生组件，方法中的两个参数：第一个参数是原生封装该UI组件时的名称，对应getName返回值，第二个参数是你js端定义的名称。还可能存在第三个参数是一个对象
{
nativeOnly:{
myclicked:true
}
}
这个参数是需要事件传递是你定义在android原生端的监听的名称 如果不加这个在js端直接引入会报错。
{...this.props} 必须有，否则组件不显示。
android端如果想收到事件的传递需要复写
@Override
public MapgetExportedCustomDirectEventTypeConstants(){returnMapBuilder.builder().put(“这里随意写”,MapBuilder.of("registrationName",“这里是你定义的监听的名称”)).build(); }}
之后才可以收到事件。
列如js端定义为RTCBtn
<RTCBtn
msg={'“面对疾风吧”}
myclicked={(event)=>{
console.log(event.nativeEvent.msg)
}}
/>
记录一下
