react native在app开发上的一个优势就是组件化开发，当有了足够多的自定义组件后，可以很方便的将这些组件拼装起来，开发效率提高很多。本文中将以一个picker为例子，来讲如何包装一个通用性很强的react native组件。本文的示例源码可以在ReactNativeUIComponents下载。这个项目未来会不断的维护加入更多实用的组件，也力求这个项目可以作为一个react native的示例项目，包含了react native开发中常用的router，navigator，code push等，可以作为参考。
</br>
可以在我的博客http://haiyangjiajian.com/交流更多相关内容。
picker的效果
其中picker要展示的内容，百度、搜狗、谷歌等均可以由父组件指定，其样式也可以由父组件指定。
组件包装
界面
本文封装了一个叫Picker的组件。一般推荐通过定义defaultProps来告诉组件的调用者，可以传入这个组件中的参数有哪些。可以看到可以传入的参数有style：组件样式；animationType：动画类型；transparent：是否透明；modalVisible：是否可见；dataArray：显示的数据；title：标题。可以通过传入这些参数，使这个组件拥有不同的样式，显示不同的数据。
static defaultProps = {
style: View.propTypes.style,
animationType: 'none',
transparent: true,
modalVisible: true,
dataArray: [],
title: 'title'
};
constructor(props) {
super(props);
this.state = {
dataSource: this._getDataSource(props.dataArray),
style: this.props.style,
animationType: this.props.animationType,
transparent: this.props.transparent,
modalVisible: this.props.modalVisible,
};
}
组件内部的渲染代码如下，主体是一个Modal，然后是一个整体的view
<View style={[styles.modalContainer, {backgroundColor: 'rgba(0, 0, 0, 0.5)'}]}>
在这个view中主要有两部分内容，一个是顶部的title，另一个是底部的listview，title显示从父组件中传入的标题，listview显示传入的dataArray。
<Modal
animationType={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => {this._setModalVisible(false)}}>
<View style={[styles.modalContainer, {backgroundColor: 'rgba(0, 0, 0, 0.5)'}]}>
<View style={styles.viewContainer}>
<View style={styles.titleRow}>
<TouchableOpacity style={styles.cancelButton} onPress={() => {this._setModalVisible(false)}}>
<Image style={styles.image}
source={require('../img/icon_cancel_grey.png')}/>
</TouchableOpacity>
<Text style={[styles.titleText, styles.modalTitle]}>{this.props.title}</Text>
</View>
<View style={[{marginTop: 0, marginBottom: 0}]}/>
<ListView
style={styles.flex}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={[GlobalStyles.divider, {marginTop: 0, marginBottom: 0, marginLeft: 16}]}/>}
/>
</View>
</View>
</Modal>
listView中每一个cell的渲染
_renderRow(rowData, sectionID, rowID) {
return (
<TouchableHighlight onPress={() => this._pressRow(rowData, rowID)} underlayColor='gray'>
<View>
<View style={styles.row}>
<Text style={styles.rowTitle}>
{rowData.name}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
下面是对这个组件调用的一个示例，puperseItems是一个格式化对象的数组，这个对象包含了name,id,url三个属性
<Picker
title="选择搜索引擎"
dataArray={purposeItems}
selectedData={(purpose) => {this.onPurposeSelected(purpose);}}
onHideModal={() => this.setState({purposeModalVisible: false})}
/>
至此界面的展示完毕
操作
这样一个组件主要有两种操作，点击当前列和关闭modal，如下两个函数，主要是调用了父组件传递进来的selectedData和onHideModal回调
_pressRow(rowData, rowID) {
this.props.selectedData && this.props.selectedData(rowData);
this.props.selectedIndex && this.props.selectedIndex(rowID);
}
_setModalVisible(visible) {
this.setState({modalVisible: visible});
if (visible) {
this.props.onShowModal && this.props.onShowModal();
} else {
this.props.onHideModal && this.props.onHideModal();
}
}
至此完成了一个组件的封装，可以灵活的显示父组件传入的数据，并进行各种交互。
本文的示例源码可以在ReactNativeUIComponents下载
