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下载