首頁 > web前端 > 前端問答 > react native怎麼隱藏元件

react native怎麼隱藏元件

藏色散人
發布: 2023-01-05 10:44:43
原創
3055 人瀏覽過

react native隱藏元件可以透過「display:none/flex」屬性來實現,其具體實現方法為:1、開啟對應的react檔;2、建立「

react native怎麼隱藏元件

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react native 中如何隱藏元件?

具體問題描述:

如何透過A中的switchAndroid的value來控制B模組的顯示和隱藏呢顯示全部

react native怎麼隱藏元件

問題解決方案:

展開,收起功能的實作: display: none / flex

點擊Button,修改state的狀態,從而展示/隱藏控制項

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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=&#39;#ddd&#39; style={{color:&#39;#ccc&#39;}} 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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
JavaScript事件
來自於 1970-01-01 08:00:00
0
0
0
課件老師能否發一下課件呢?
來自於 1970-01-01 08:00:00
0
0
0
javascript - Vue中子元件怎麼傳參父元件參參
來自於 1970-01-01 08:00:00
0
0
0
沒有課件啊
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板