项目中我们经常会遇到展开收起的功能，今天讨论下展开收起的思路，
其实就是添加一个标记（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, }, })
今天的文章vue文字的展开与收起_空间说说展开收起怎么设置分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/52153.html
