在android /ios /RN自定义组件,是每位程序员开发重要性。
我们知道,自定义组件是很多自带的控件加上有点逻辑代码完成。
今天给大家介绍是ReactNative自定义控件,主要是介绍的类似ios UITableViewCell / android ListView Item。
代码如下:
<ProfileStaticCell title="我的收藏" style={{borderBottomWidth: gScreen.onePix}} imageName={require('../../resource/ic_my_collect.png')} onPress={this._onPressStaticCell} />这里定义了四个属性 title 、style、 imageName、onPress。把这些属性传输到自定义组件。
如下:
const ProfileStaticCell = ({ title, imageName, style, onPress }) => { return ( <TouchableOpacity activeOpacity={0.75} style={styles.staticCell} onPress={()=>onPress(title)} > <Image style={{width: 20, height: 20, marginHorizontal: 15}} source={imageName}/> <View style={[styles.cellStyle, style ]}> <Text style={{color: 'gray'}}>{title}</Text> <Image style={{width: 20, height: 20}} source={require('../../resource/ic_my_right.png')}/> </View> </TouchableOpacity> ) }
这里就是定义了样式:
staticCell: { flexDirection: 'row', height: 46, justifyContent: 'center', alignItems: 'center' }, cellStyle: { flex: 1, height: 46, borderColor: '#d9d9d9', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingRight: 15 }