[React Native]原生UI组件（下）

上一篇文章[React Native]原生UI组件（上）我们介绍了如何在ReactNative中使用原生UI组件，并与原生UI组件进行“数据”交互。

但是，更多情况下，我们不会仅局限于“数据”的交互，我们更想知道在原生UI组件上用户触发的“事件”，并将这些事件“反馈”到ReactNative。这样，才能在ReactNative中去完成我们的业务逻辑。

上一篇文章的示例：“仿QQ”滑动删除消息组件SwipeMenuListView中，我们使用setMenuCreator方法为SwipeMenuListView的Item设置菜单，也就是下图我们所看到的，当你向左滑动某一行的数据，会出现一个“删除”的菜单图标。

device-2016-06-05-204355_0-76.gif

那么，为了更好的演示本篇文章的主题：“事件”交互，我们会在SwipeMenuListView示例的基础之上，一步步实现如何在点击“删除”菜单的时候，把列表中的数据删除，并且把这条删除的数据的“反馈”到ReactNative中。同时在ReactNative使用ToastAndroid组件，“显示”用户刚刚删除的数据。

如果要处理原生UI组件的事件，我们需要将原生UI组件用一个普通的React组件进行封装。
第一步：新建一个SwipeMenuListViewComponent.js文件，定义一个组件SwipeMenuListViewComponent

class SwipeMenuListViewComponent extends Component {
｝

第二步：引入原生导出的SwipeMenuListView，并将SwipeMenuListView与React组件SwipeMenuListViewComponent进行关联

// 第一个参数是原生模块的名称， 第二个是当前组件的名称
var SwipeMenuListView = requireNativeComponent('SwipeMenuListView', SwipeMenuListViewComponent, {
    nativeOnly: {onChange: true}
});

这里，第三个参数nativeOnly有些特殊。这个参数的作用在于，如果你想导出某些原生UI的属性，但你又不希望它成为React封装组件的属性，所以你不能放在propTypes中。可是如果你不放的话，又会产生一个错误，解决的办法就是带上nativeOnly参数

第三步：使用AndroidStudio打开android项目，修改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
                    // 删除数据
                    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;
        }
    });

    // ...省略
}

点击“删除”菜单，首先使用dataSource.remove(position);删除一行数据，然后通知Adapter刷新adapter.notifyDataSetChanged();，我们来看下这个方法

reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(swipeMenuListView.getId(), "topChange", map);

这个方法主要作用就是向ReactNative发送给topChange事件，并将参数使用WritableMap携带给ReactNative，这里的topChange被映射到JS的onChange。这样，在 React 层就能这样用了：<SwipeMenuListView onChange={xxx}/>

topChange事件在JS端映射到onChange，这个过程是由ReactNative帮我们完成的，参考UIManagerModuleConstants.java

第四步：实现SwipeMenuListViewComponent的render方法

// ...省略
render() {
  // onChange事件是JS已经定义好的，对应原生的topChange事件
  return <SwipeMenuListView {...this.props} onChange={(event)=>{
    this.props.onDelete(event);
  }}/>;
}
// ...省略

onChange对应原生UI组件发送的topChange事件。这里，我们将事件对应到我们在propTypes中声明的func：onDelete，这样是为了外部引用SwipeMenuListViewComponent组件的地方可以使用这个事件

SwipeMenuListViewComponent.propTypes = {
  array: PropTypes.arrayOf(PropTypes.string),
  onDelete: PropTypes.func,
  ...View.propTypes, // 包含默认的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>
    );
  }
}
// ... 省略

好了，关于原生UI组件的讲解就到此结束了。如有不正确之处，欢迎指正~
本文的源码地址：Demo4