react native隱藏元件可以透過「display:none/flex」屬性來實現,其具體實現方法為:1、開啟對應的react檔;2、建立「
本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react native 中如何隱藏元件?
具體問題描述:
如何透過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影片教學》
以上是react native怎麼隱藏元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!