React Native中的自定义Cell其实就是自定义View,只是这里的View作用类似于iOS中的Cell罢了,这里需要注意传值和判断问题即可,来看
var DCCommonCell = React.createClass({
//这里定义的就是外面传进来的参数
getDefaultProps(){
return{
title: '', //标题
isSwitch: false, //是否展示开关
rightTitle: ''
}
},
getInitialState(){
return{
isOn:false,
}
},
render() {
return (
{alert('点击了')}}>
{/*左边*/}
{this.props.title}
{/*右边*/}
{this.renderRightView()}
);
},
//cell右边展示的内容
renderRightView(){
//判断
if(this.props.isSwitch){
return(
{this.setState({isOn: !this.state.isOn})}} style={{marginRight:8}} />
)
}else{
return(
{this.rightTitle()}
)
}
},
rightTitle(){
if (this.props.rightTitle.length > 0){
return(
{this.props.rightTitle}
)
}
}
});
const styles = StyleSheet.create({
container:{
height:Platform.OS == 'ios' ? 40 : 30,
backgroundColor:'white',
borderBottomColor:'#dddddd',
borderBottomWidth:0.5,
//确定主轴方形
flexDirection:'row',
//主轴对齐方式
justifyContent:'space-between',
//侧轴对齐方式,垂直居中
alignItems:'center',
}
});
//输出组件类
module.exports = DCCommonCell ;
使用就很简单了,引入外部组件,传入参数就可以了
/*---引入外部组件----*/
var DCCommonCell = require('./DCCommonCell');
来看看最终的效果