reactnative 桥接androidview的过程

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)

}}

/>

记录一下

本文参考:大佬的地址 @boyrt