上一篇文章[React Native]原生UI組件（上）我們介紹了如何在ReactNative中使用原生UI組件，并與原生UI組件進(jìn)行“數(shù)據(jù)”交互桌肴。
但是昂灵，更多情況下，我們不會(huì)僅局限于“數(shù)據(jù)”的交互炒刁，我們更想知道在原生UI組件上用戶觸發(fā)的“事件”恩沽，并將這些事件“反饋”到ReactNative。這樣翔始，才能在ReactNative中去完成我們的業(yè)務(wù)邏輯罗心。
上一篇文章的示例：“仿QQ”滑動(dòng)刪除消息組件SwipeMenuListView中，我們使用setMenuCreator方法為SwipeMenuListView的Item設(shè)置菜單城瞎，也就是下圖我們所看到的渤闷，當(dāng)你向左滑動(dòng)某一行的數(shù)據(jù)，會(huì)出現(xiàn)一個(gè)“刪除”的菜單圖標(biāo)脖镀。
那么飒箭，為了更好的演示本篇文章的主題：“事件”交互，我們會(huì)在SwipeMenuListView示例的基礎(chǔ)之上蜒灰，一步步實(shí)現(xiàn)如何在點(diǎn)擊“刪除”菜單的時(shí)候弦蹂，把列表中的數(shù)據(jù)刪除，并且把這條刪除的數(shù)據(jù)的“反饋”到ReactNative中强窖。同時(shí)在ReactNative使用ToastAndroid組件凸椿，“顯示”用戶剛剛刪除的數(shù)據(jù)。
如果要處理原生UI組件的事件翅溺，我們需要將原生UI組件用一個(gè)普通的React組件進(jìn)行封裝脑漫。
第一步：新建一個(gè)SwipeMenuListViewComponent.js文件髓抑，定義一個(gè)組件SwipeMenuListViewComponent
class SwipeMenuListViewComponent extends Component {
｝
第二步：引入原生導(dǎo)出的SwipeMenuListView，并將SwipeMenuListView與React組件SwipeMenuListViewComponent進(jìn)行關(guān)聯(lián)
// 第一個(gè)參數(shù)是原生模塊的名稱优幸， 第二個(gè)是當(dāng)前組件的名稱
var SwipeMenuListView = requireNativeComponent('SwipeMenuListView', SwipeMenuListViewComponent, {
nativeOnly: {onChange: true}
});
這里启昧，第三個(gè)參數(shù)nativeOnly有些特殊。這個(gè)參數(shù)的作用在于劈伴，如果你想導(dǎo)出某些原生UI的屬性密末，但你又不希望它成為React封裝組件的屬性，所以你不能放在propTypes中跛璧⊙侠铮可是如果你不放的話，又會(huì)產(chǎn)生一個(gè)錯(cuò)誤追城，解決的辦法就是帶上nativeOnly參數(shù)
第三步：使用AndroidStudio打開android項(xiàng)目刹碾，修改AppViewManager.java文件的createViewInstance方法
protected SwipeMenuListView createViewInstance(final ThemedReactContext reactContext) {
// ...省略
// bind menu click listener
swipeMenuListView.setOnMenuItemClickListener(new SwipeMenuListView.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(int position, SwipeMenu menu, int index) {
switch (index)
{
case 0: // delete menu
// 刪除數(shù)據(jù)
String language = adapter.getItem(position);
dataSource.remove(position);
adapter.notifyDataSetChanged();
WritableMap map = Arguments.createMap();
map.putString("language", language);
// "topChange"事件在JS端映射到"onChange"，參考UIManagerModuleConstants.java
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(swipeMenuListView.getId()
, "topChange", map);
break;
}
return false;
}
});
// ...省略
}
點(diǎn)擊“刪除”菜單座柱，首先使用dataSource.remove(position);刪除一行數(shù)據(jù)迷帜，然后通知Adapter刷新adapter.notifyDataSetChanged();，我們來(lái)看下這個(gè)方法
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(swipeMenuListView.getId(), "topChange", map);
這個(gè)方法主要作用就是向ReactNative發(fā)送給topChange事件色洞，并將參數(shù)使用WritableMap攜帶給ReactNative戏锹，這里的topChange被映射到JS的onChange。這樣火诸，在 React 層就能這樣用了：<SwipeMenuListView onChange={xxx}/>
topChange事件在JS端映射到onChange锦针，這個(gè)過程是由ReactNative幫我們完成的，參考UIManagerModuleConstants.java
第四步：實(shí)現(xiàn)SwipeMenuListViewComponent的render方法
// ...省略
render() {
// onChange事件是JS已經(jīng)定義好的置蜀，對(duì)應(yīng)原生的topChange事件
return <SwipeMenuListView {...this.props} onChange={(event)=>{
this.props.onDelete(event);
}}/>;
}
// ...省略
onChange對(duì)應(yīng)原生UI組件發(fā)送的topChange事件奈搜。這里，我們將事件對(duì)應(yīng)到我們?cè)?code>propTypes中聲明的func：onDelete盯荤，這樣是為了外部引用SwipeMenuListViewComponent組件的地方可以使用這個(gè)事件
SwipeMenuListViewComponent.propTypes = {
array: PropTypes.arrayOf(PropTypes.string),
onDelete: PropTypes.func,
...View.propTypes, // 包含默認(rèn)的View的屬性
};
第五步：也是最后一步馋吗，在index.android.js中使用SwipeMenuListViewComponent組件
// ... 省略
var SwipeMenuListView = require('./SwipeMenuListViewComponent');
class Demo4 extends Component {
render() {
return (
<View style={styles.container}>
<SwipeMenuListView style={styles.listView} array={["Java", "C", "C++", "C#", "Python", "PHP"
, "Visual Basic .NET", "JavaScript", "Assembly Language", "Ruby", "Perl"
, "Delphi", "Visual Basic", "Swift", "MATLAB", "Pascal"]}
onDelete={(event)=>{
ToastAndroid.show(event.nativeEvent.language, ToastAndroid.SHORT);
}
}>
</SwipeMenuListView>
</View>
);
}
}
// ... 省略
好了，關(guān)于原生UI組件的講解就到此結(jié)束了秋秤。如有不正確之處宏粤，歡迎指正~
本文的源碼地址：Demo4
