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

})