ReactNative自定义控件。

在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
}