• 技术文章 >web前端 >前端问答

    react native怎么隐藏组件

    藏色散人藏色散人2023-01-05 10:44:43原创112

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

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react native 中如何对组件进行隐藏?

    具体问题描述:

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

    1a9841096a1065cab1aa7383eba8441.jpg

    问题解决方案:

    展开,收起功能的实现: 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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:组件 react-native
    上一篇:react 表格怎么增加 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react启动无法访问怎么办• react组件样式引用失败怎么办• react http请求放在哪• react怎么实现登录和注册• react 表格怎么增加
    1/1

    PHP中文网