RN_选项卡

image.png

constructor(props) {
    super(props);
    this.state = {
        TabChoose: 'LianXi',
    }
}

    {/* 选项卡 */}
    <View style={ExamListStyles.TabControl}>
        <TouchableOpacity style={ExamListStyles.TabControlItem} onPress={()=>this.TabChooseToggleFun('LianXi')}>
            <Text style={{color: this.state.TabChoose === 'LianXi' ? '#3399ff' : '#2c2c2c'}}>章节练习</Text>
        </TouchableOpacity>
        <TouchableOpacity style={ExamListStyles.TabControlItem} onPress={()=>this.TabChooseToggleFun('ZhenTi')}>
            <Text style={{color: this.state.TabChoose === 'ZhenTi' ? '#3399ff' : '#2c2c2c'}}>历年真题</Text>
        </TouchableOpacity>
        <TouchableOpacity style={ExamListStyles.TabControlItem} onPress={()=>this.TabChooseToggleFun('CePing')}>
            <Text style={{color: this.state.TabChoose === 'CePing' ? '#3399ff' : '#2c2c2c'}}>考试测评</Text>
        </TouchableOpacity>
    </View>
    {/* 选项卡面板 */}
    {this.TabChooseTogglePanelFunWrap()}

TabChooseToggleFun(e) {
    if(e != this.state.TabChoose) {
        this.setState({
            TabChoose: e,
        })
    }
}

// 选项卡面板
TabChooseTogglePanelFunWrap() {
    if(this.state.TabChoose === 'LianXi') {
       return(
               <Text>1111</Text>
       )
    } else if(this.state.TabChoose === 'ZhenTi') {
        return(
                <Text>2222</Text>
        )
    } else if(this.state.TabChoose === 'CePing') {
        return(
                <Text>3333</Text>
        )
    }
}