React Native 展開收起功能實現

項目中我們經常會遇到展開收起的功能，今天討論下展開收起的思路，

其實就是添加一個標記（openflag），然后我們需要展開收起的視圖依賴於這個標記。

效果如圖：

收起時顯示展開

 

展開時顯示收起

話不多說上代碼

export default class Test extends React.Component<IProps> {
    state = {
        openflag: false,
    };

    render() {
        return (
            <View style={style.item_bg}>
                {/* 測試標題 */}
                <View style={style.item_top_bg}>
                    <Text style={style.item_tab}>測試</Text>
                    {/* 展開收起 */}
                    <TouchableOpacity style={style.item_top_btn} onPress={() => {
                        // 取反
                        let open = this.state.openflag
                        this.setState({ openflag: !open })
                    }}>
                        {/* 文本 */}
                        <Text style={style.item_top_right_title}>{this.showTitle()}</Text>
                        {/* 圖標 */}
                        {this.showImg()}
                    </TouchableOpacity>

                </View>
                {/* 展開收起內容*/}
                {this.showView()}
            </View>
        );
    }

    private showTitle() {
        let color = '展開'
        if (this.state.openflag) {
            color = '收起'
        }
        return (
            color
        );
    }

    private showImg() {
        if (this.state.openflag) {
            return (
                <Image source={require('../../../image/report_up.png')} />
            );
        }
        return (
            <Image source={require('../../../image/report_down.png')} />
        );
    }

    private showView() {
        if (this.state.openflag) {
            return (
                <View style={style.item_center_bg}>
                    <View style={style.item_line}></View>
                    <View style={style.item_role_bg}>
                        
                    </View>
                </View>
            );
        }

    }
}

const style = StyleSheet.create({

    item_bg: {
        backgroundColor: 'transparent',
    },

    item_top_bg: {
        borderRadius: 8,
        marginHorizontal: 10,
        marginBottom: 10,
        paddingHorizontal: 15,
        paddingVertical: 20,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',

          justifyContent:'space-between',

    },

    item_tab: {
        fontSize: DeviceHelp.fontSize(17),
        fontWeight: DeviceHelp.fontBold,
        color: '#3480FF',
    },

    item_top_btn: {
        alignItems: 'center',
        flexDirection: 'row',
    },

    item_top_right_title: {
        marginRight: 5,
        fontSize: DeviceHelp.fontSize(14),
        color: '#3480FF',
    },

    item_center_bg: {
        marginTop: -30,
        marginHorizontal: 10,
        paddingHorizontal: 15,
        backgroundColor: '#FFFFFF',
    },

    item_line: {
        marginTop: 20,
        height: 0.5,
        backgroundColor: '#EBEBEB',
    },

    item_role_bg: {
        marginTop: 17,
        marginBottom: 20,
        flexDirection: 'row',
        alignItems: 'center',
        height: 45,
        backgroundColor: '#F7FAFF',
        borderRadius: 4,
    },

})