这篇文章主要讲解了“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模块的显示和隐藏呢显示全部
问题解决方案:
展开,收起功能的实现: 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>)}
感谢各位的阅读,以上就是“react native如何隐藏组件”的内容了,经过本文的学习后,相信大家对react native如何隐藏组件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!