React Native自定义Cell

/ 0评 / 2

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');


       

来看看最终的效果

评论已关闭。