如何在React Native中取消显示组件？

发布时间：2023-07-07 12:03:04 所属栏目：教程来源：互联网

导读： 　　这篇文章主要讲解了“react native如何隐藏组件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react native如何

　　这篇文章主要讲解了“react native如何隐藏组件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react native如何隐藏组件”吧！

　　react native隐藏组件可以通过“display:none/flex”属性来实现，其具体实现方法是：1、打开相应的react文件；2、创建“<Button color='#ddd' style={{color:'#ccc'}} title={...} onPress={...}/>”；3、通过点击Button，修改state的状态来实现隐藏组件即可。

　　具体问题描述：

　　如何通过A中的switchAndroid的value来控制B模块的显示和隐藏呢显示全部

　　react native如何隐藏组件

　　问题解决方案：

　　展开，收起功能的实现： display: none / flex

　　点击Button，修改state的状态，从而展示/隐藏控件

　　state = {

　　displayShuoming:'none',

　　btnShuoming:'>'

　　};

　　scrollShuoming =()=>{

　　let dis = this.state.displayShuoming;

　　if(dis == 'none'){

　　this.setState({

　　displayShuoming:'flex',

　　btnShuoming:'>'

　　})

　　}else{

　　this.setState({

　　displayShuoming:'none',

　　btnShuoming:'v'

　　})

　　}

　　}

　　render(){

　　return (

　　<View style={[styles.bg_white,styles.flex_col,styles.pl_20,styles.pr_20,styles.mt_10]}>

　　<View style={[styles.flex_row,styles.bg_white,styles.mt_10,styles.pb_10]}>

　　<Text style={[styles.flex_3]}>产品说明</Text>

　　<Button color='#ddd' style={{color:'#ccc'}} title={this.state.btnShuoming} onPress={this.scrollShuoming}/>

　　</View>

　　<View style={{display:this.state.displayShuoming}}>

　　<View style={[styles.flex_col,styles.border_top,styles.pt_10]}>

　　<Text style={[styles.text_gray]}></Text>

　　</View>

　　</View>

　　</View>

　　)

　　}

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!