本文對(duì)于UI組件的封裝嘱支，主要從兩部分介紹：

• 基本視圖封裝
• 事件處理

demo中是封裝原生Button組件撮躁，記錄使用過程及需要注意的問題。

一牙甫、基本視圖封裝

• 創(chuàng)建一個(gè)ViewManager的子類滩褥。
• 實(shí)現(xiàn)createViewInstance方法病蛉。
• 導(dǎo)出視圖的屬性設(shè)置器：使用@ReactProp（或@ReactPropGroup）注解。
• 把這個(gè)視圖管理類注冊(cè)到應(yīng)用程序包的createViewManagers里瑰煎。
• 實(shí)現(xiàn)JavaScript模塊铺然。

1.1創(chuàng)建一個(gè)ViewManager的子類

SimpleViewManager是ViewManager的派生類，通過該類創(chuàng)建和管理視圖對(duì)象酒甸。

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組件魄健，該組件可以是自定義組件。

實(shí)現(xiàn)方法getName插勤，返回值RCTButton在實(shí)現(xiàn)JavaScript模塊時(shí)需要用到诀艰。

1.2實(shí)現(xiàn)createViewInstance方法

RCTButton類中，實(shí)現(xiàn)createViewInstance方法饮六，創(chuàng)建、返回View對(duì)象苛蒲。

@Override
protected Button createViewInstance(ThemedReactContext reactContext) {
    this.mContext = reactContext;
    Button button = new Button(reactContext);
    return button;
}

1.3導(dǎo)出視圖的屬性設(shè)置器

使用@ReactProp（或@ReactPropGroup）注解,這里介紹@ReactProp卤橄。

@ReactProp(name = "text")
public void setText(Button button,String text){
    button.setText(text);
}

• name="text" : name對(duì)應(yīng)的值是在js代碼中使用該封裝組件時(shí)的屬性名。

1.4 視圖管理類注冊(cè)

//自定義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());
    }
}

實(shí)現(xiàn)了兩個(gè)方法臂外，在createViewManagers方法中添加自定義的視圖管理類RCTButton窟扑。
自定義RTCViewPackage類需要在MainApplication中添加：

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RTCViewPackage()
      );
    }

1.5 實(shí)現(xiàn)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關(guān)聯(lián)js和原生組件喇颁，方法中的兩個(gè)參數(shù)：第一個(gè)參數(shù)是JS模塊名稱，第二個(gè)參數(shù)是原生封裝該UI組件時(shí)的名稱嚎货，對(duì)應(yīng)getName返回值橘霎。
• {...this.props} 必須有，否則組件不顯示殖属。

二姐叁、事件處理

當(dāng)一個(gè)原生事件發(fā)生的時(shí)候，它應(yīng)該也觸發(fā)JS端視圖上的事件洗显，這兩個(gè)視圖會(huì)依據(jù)getId()而關(guān)聯(lián)在一起外潜。（可以理解為原生層View給JS層View發(fā)送消息--個(gè)人理解O(∩_∩)O~）

2.1 事件映射

重寫getExportedCustomDirectEventTypeConstants方法，將原生事件name映射到j(luò)s事件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方法玄组，添加點(diǎn)擊事件監(jiān)聽滔驾。

    @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","點(diǎn)擊btn2");
                reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                        view.getId(),
                        EVENT_NAME_ONCLICK,
                        data
                );
            }
        });
    }

關(guān)鍵代碼：reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( view.getId(), EVENT_NAME_ONCLICK_NATIVE, data ); } });
該代碼的類似于：view組件接收到了事件，傳遞給JS層俄讹。
receiveEvent的第一個(gè)參數(shù)是關(guān)聯(lián)原生組件和js組件哆致，第二個(gè)參數(shù)是事件映射中的key值，第三個(gè)參數(shù)是傳遞給js層的數(shù)據(jù)颅悉。

另外沽瞭，如果不重寫addEventEmitters方法，在createViewInstance方法中發(fā)送事件給js端也可剩瓶。但是優(yōu)先級(jí)低于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) {
                //創(chuàng)建數(shù)據(jù)傳遞信使，雷士android中的bundle
                WritableMap data = Arguments.createMap();
                data.putString("msg","點(diǎn)擊了btn");
                mContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                        button.getId(),
                        EVENT_NAME_ONCLICK_NATIVE,//通過該string延曙，查找js層對(duì)應(yīng)的方法名
                        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獲取原生層傳遞的數(shù)據(jù)
        this.props.onPress(event.nativeEvent.msg);
    }

    render() {
        return <RTCBtn
            {...this.props} jsClick = {(event)=>this._onClick(event)}/>;
    }

}

關(guān)鍵代碼：

• {nativeOnly:{jsClick:true}} ： 故名思議豌鹤，nativeOnly--只在原生中生效的屬性，該屬性將不再propType中定義枝缔，若不添加編譯時(shí)將會(huì)報(bào)錯(cuò)布疙。
• jsClick = {(event)=>this._onClick(event)} ：通過event可以獲取到原生傳遞的數(shù)據(jù)
• jsClick 對(duì)應(yīng)原生代碼中的事件映射中的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("原生傳遞的數(shù)據(jù)為："+msg)}}/>
      </View>
    );
  }

使用過程中，添加了onPress屬性愿卸。

拓展知識(shí)：

1.原生發(fā)送消息灵临，js層注冊(cè)監(jiān)聽

reactContext
            .getJSModule(RCTNativeAppEventEmitter.class)
            .emit(eventName, params);
           //eventName:String JS中通過eventName接收  
           //params:WritableMap 需要傳遞的參數(shù) 

js層接收：

NativeAppEventEmitter.addListener('onVolumeChange', () => {})
//onVolumeChange =>原生代碼中的eventName

2.自定義組件時(shí)，js層給native層發(fā)送消息
native層需重寫getCommandsMap和receiveCommand方法趴荸。

/**  
 * 接收交互通知  
 * @return  
 */  
@Nullable  
@Override  
public Map<String, Integer> getCommandsMap() {  
    return MapBuilder.of("handleTask",1);  
}  

//根據(jù)RN層發(fā)送的對(duì)應(yīng)通知ID儒溉，處理對(duì)應(yīng)任務(wù)請(qǐng)求
@Override  
public void receiveCommand(ImageView root, int commandId, @Nullable ReadableArray args) {  
    switch (commandId){  
        case 1:  
            if(args != null) {  
                String name = args.getString(0);//獲取第一個(gè)位置的數(shù)據(jù)  
                Toast.makeText(context, "收到RN層的任務(wù)通知...", Toast.LENGTH_SHORT).show();  
            }  
            break;  
        default:  
            break;  
    }  
}  

js層發(fā)送任務(wù)通知

import {  UIManager, findNodeHandle } from 'react-native';

sendNotification() {  
  //向native層發(fā)送命令  
  UIManager.dispatchViewManagerCommand(  
      findNodeHandle(this.refs.rctBtn),  
      UIManager.RCTButton.Commands.handleTask, // Commands后面的值與原生層定義的`handleTask`一致  
      ["from React Native"] // 向原生層傳遞的參數(shù)數(shù)據(jù),數(shù)據(jù)形如：["第一個(gè)參數(shù)","第二個(gè)參數(shù)",...]  
  );  
}  
render() {
        return <RTCBtn
            ref = 'rctBtn'
            {...this.props} onClick = {(event)=>this._onClick(event)}/>;
    }