iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react native怎么隐藏组件
  • 947
分享到

react native怎么隐藏组件

组件react-native 2023-05-14 22:05:08 947人浏览 泡泡鱼
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react native 中如何对组件进行隐藏?具体问题描述:如何通过A中的switchAndroid的value来控制B模块的显示和隐藏呢显示全部问题解

react native怎么隐藏组件

教程操作环境: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 native怎么隐藏组件的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react native怎么隐藏组件

本文链接: https://www.lsjlt.com/news/206659.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react native怎么隐藏组件
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react native 中如何对组件进行隐藏?具体问题描述:如何通过A中的switchAndroid的value来控制B模块的显示和隐藏呢显示全部问题解...
    99+
    2023-05-14
    组件 react-native
  • react native如何隐藏组件
    这篇文章主要讲解了“react native如何隐藏组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native如何隐藏组件”吧!react native隐藏组件可以通过“di...
    99+
    2023-07-04
  • react怎么隐藏按钮
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么隐藏按钮?React中通过diaplay实现控件按钮的呈现与隐藏1、实现效果通过单击编辑图标实现页面中对应按钮的呈现与隐藏、效果图如下2、代...
    99+
    2023-05-14
    react display
  • React-Native组件之Modal怎么用
    这篇文章将为大家详细讲解有关React-Native组件之Modal怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Modal组件可以用来覆盖包含React Nati...
    99+
    2022-10-19
  • react-native-tab-navigator组件怎么用
    小编给大家分享一下react-native-tab-navigator组件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要...
    99+
    2022-10-19
  • react怎么根据条件隐藏元素
    本教程操作环境:Windows7系统、react18版、Dell G3电脑。React控制元素显示和隐藏的方法有三种方法:第一种是通过state变量来控制是否渲染元素,类似vue中的v-if。第二种是通过style控制display属性,类...
    99+
    2023-05-14
    React
  • react怎么隐藏滚动条滚动
    本教程操作环境:Windows10系统、react-native0.67版、Dell G3电脑。react怎么隐藏滚动条滚动?react-native实现水平滚动并隐藏滚动条 showsHorizontalScrollIndicator...
    99+
    2023-05-14
    滚动条 React
  • React中Native悬浮按钮组件怎么用
    小编给大家分享一下React中Native悬浮按钮组件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!React Nativ...
    99+
    2022-10-19
  • react native如何删除组件
    这篇“react native如何删除组件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“r...
    99+
    2022-10-19
  • deepin20隐藏文件怎么取消隐藏?deepin显示隐藏文件的方法
    deepin20怎么显示隐藏文件?deepin20系统中有很多重要的文件被隐藏了,想要修改,需要显示出来,,该怎么显示呢?下面我们就来看看详细的教程。 点任务栏上的【文件管理器】。 在【文件管理器】中点右上角的下拉菜单按钮...
    99+
    2022-06-01
    deepin 隐藏文件 deepin20
  • react怎么实现密码隐藏功能
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react怎么实现密码隐藏功能?React Native 密码输入的显示与隐藏 Image点击事件 眼睛 输入框密码1.效果图2.添加依赖imp...
    99+
    2023-05-14
    密码 React
  • react怎么实现点击隐藏显示
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么实现点击隐藏显示?react中元素的显示和隐藏方式的使用 在react中,我们有常用的有四种方式来显示元素的显示和隐藏,和vue不同,vue...
    99+
    2023-05-14
    React
  • element-ui的隐藏组件el-scrollbar怎么用
    这篇文章将为大家详细讲解有关element-ui的隐藏组件el-scrollbar怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。虽然在官方文档中没有给出这个组件,但...
    99+
    2022-10-19
  • react如何根据条件隐藏元素
    本文小编为大家详细介绍“react如何根据条件隐藏元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“react如何根据条件隐藏元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。实现方法:1、通过state变量来...
    99+
    2023-07-04
  • git怎么隐藏文件
    在使用 Git 进行版本控制的过程中,隐藏文件是一个很实用的功能。在 Git 中,隐藏文件指的是一些带有特殊后缀或目录标识符的文件或目录,它们不会被 Git 自动追踪,也不会被包含在版本控制中。为什么要隐藏文件?我们知道,Git 会自动追踪...
    99+
    2023-10-22
  • React-Native之截图组件react-native-view-shot的介绍与使用小结
    目录一、现象二、解决三、总结:一、现象 1、需求:把某展示页面进行截取保存到相册、并可进行以海报的形式分享出去; 2、支持iOS和安卓 二、解决 1、安装: npm i --save...
    99+
    2022-11-12
  • php怎么隐藏入口文件
    这篇文章将为大家详细讲解有关php怎么隐藏入口文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。php隐藏入口文件的方法:首先开启apache重写模块;然后在项目根目录与入口文件同级的目录重写分布式配置文...
    99+
    2023-06-14
  • win7怎么查看隐藏文件
    这篇“win7怎么查看隐藏文件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“win7怎么查看隐藏文件”文章吧。win7查看隐...
    99+
    2023-07-01
  • win7怎么把文件夹隐藏
    win7怎么把文件夹隐?藏有的时候,我们的电脑里面有导入了一些重要的文件夹时,可以去将它们进行隐藏起来,这样就可以避免文件夹被其他用户使用电脑的时候查看到了。那么如何去进行隐藏操作呢?一起来看看win7系统隐藏文件夹图文步骤分享吧。win7...
    99+
    2023-07-18
  • Win10怎么显示隐藏文件
    在Windows 10中显示隐藏文件,可以按照以下步骤操作:1. 打开文件资源管理器:可以通过在任务栏上的搜索框中键入“文件资源管理...
    99+
    2023-08-28
    Win10
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作