解决react-native组件scrollview组件不能滑动

最新推荐文章于 2024-05-16 01:23:36 发布
最新推荐文章于 2024-05-16 01:23:36 发布
阅读量5.7k 收藏
点赞数
分类专栏： RN 文章标签： react-native scrollview 滑动 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baconcc/article/details/99549081
版权

  • 问题描述：发现在添加了scrollview组件之后内容无法进行滑动

  • 原因解释：没有为scrollview和它的父级组件设置高度属性

  • 解决方案：为scrollview和它的父级组件设置高度属性

 当时找了几篇文章感觉没说到点子上，所以直接查了RN官方文档的scrollview组件，里面就有介绍，问题也就迎刃而解了，推荐大家多去官网。这个是地址：https://reactnative.cn/docs/scrollview/

 

蓝罗人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-native ScrollView触摸与滚动事件
qq_30053399的博客
08-29 7869
ScrollView是我们常用的组件之一，因此搞清楚它的触摸与滚动事件十分重要！1.在ScrollView里面轻触一下（1）onStartShouldSetResponderCapture 这个属性接收一个回调函数，函数原型是 function(evt): bool，在触摸事件开始（touchDown）的时候，RN 容器组件会回调此函数，询问组件是否要劫持事件响应者设置，自己接收事件处理，
react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向
02-14
在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...
React-Native之ScorllView无法滑动
hp627578067的博客
05-06 2259
在使用React-Native进行开发的时候，ScorllView通常作为最顶层的元素，因此设置Flex：1属性时需谨慎。 出现无法滑动的情况时，解决办法如下： 1.确认XXXXX属性，是否设置为不滚动 2.检查flex：1样式，若无父组件且设置为flex：1，则需去掉该样式 ...
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview(1)
最新发布
2401_84447233的博客
05-16 252
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
react native Scrollview在某些时候滚动无效
陈柱的博客
10-31 5190
react native 在某些时候滚动无效 今天在使用Scrollview的时候滚动没有效果，直接上代码： return( View style={{flex:1}}> NavigatorHeader nav={this.props.nav} title="首页">NavigatorHeader> HomeCategory nav={
react-native使用ScrollView组件出现不滑动或者隐藏的解决方案
weixin_43660626的博客
09-22 3515
1、ScrollView组件上不能存在高度和flex， 2、ScrollView如果为嵌套的子组件，其父组件上必须有固定高度
react native 中ScrollView 滚动显示不全问题
三七二十一的博客
06-01 6794
使用ScrollView的时候,遇到一个问题,里面的内容靠下的部分需要用力拉才能看见,一松开又弹回去了(原谅我拙劣的叙述,不知道用什么样的专业术语) 看了官网的解释才知道原因: ScrollView 的功能就是把其包含的不确定高度的内容通过滚动操作在一个固定高度的窗口显示,所以 ScrollView必须有一个确定的高度才能正常工作!!! 要给一个ScrollView确定一个高度的话，要...
react-native-scrollable-tab-view：可以在之间滑动的选项卡式导航，每个选项卡可以具有自己的ScrollView，并在滑动之间保持自己的滚动位置。 令人愉快的动画。 可自定义的标签栏
02-05
react-native-scrollable-tab-view 这可能是我在Android上最喜欢的导航模式，但愿它在iOS上更常见！ 这是React Native的非常简单的纯JavaScript实现。 有关此动画背后的工作原理的更多信息，请查看《 反弹”部分。 ...
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
10-15
主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
react-native-directed-scrollview：无法维护-参见下文。 本地实现的滚动视图组件，可让您为子内容指定不同的滚动方向
02-05
该库不再被积极维护，并且不能保证与最新版本的React Native一起使用。 随意分叉仓库和/或修改代码。 react-native-directed-scrollview 本地实现的scrollview组件，可让您为子内容指定不同的滚动方向。 iOS实现...
react-native-anchor-carousel:React Native 的一个简单的可滑动轮播，它锚定列表的两侧
08-03
React Native 的一个简单的可滑动轮播，它锚定列表的两侧。 安装 安装依赖。 $ npm install react-native-anchor-carousel $ yarn add react-native-anchor-carousel 对于旧版本，请安装3.1.2 $ npm install ...
android HorizontalScrollView嵌套RecyclerView横向不能滑动问题
程序员张三的笔记
02-08 6010
开发场景：在 HorizontalScrollView内嵌套RecyclerView和其他内容，要求其他控件和RecyclerView一起横向滑动，而RecyclerView自身滑动事件不响应。问题分析：1.HorizontalScrollView内嵌套RecyclerView，发现HorizontalScrollView不能横向滑动；                2.RecyclerView于...
react native中ScrollView嵌套TextInput安卓端有滑动问题
weixin_38009285的博客
06-12 260
（3）用TouchableOpacity包裹TextInput组件。⚠️：此种方法不能将光标移动到前面的位置，只能固定在最后，因为点击的事件是TouchableOpacity而非TextInput。react native中ScrollView嵌套TextInput，TextInput组件设置了 textAligin:‘right’ 后安卓端按住TextInput组件的区域无法正常进行滑动。ScrollView嵌套TextInput后，滑动事件被TextInput组件使用，没有被父组件捕捉到滑动。
react native的ScrollView滑动到指定位置
热门推荐
peach
01-28 1万+
情景：Modal做的选择弹出框，传入用户可选择的数据源，用户选择之一，下次点开时，自动到当前选择的参数位置附近，方便用户调整                 ref={scrollView => {                 if(scrollView !== null){                     setTimeout(()=>{     //父组件传入的
React Native之 ScrollView
大灰狼的小绵羊哥哥的博客
03-10 623
contentContainerStyle 这个样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。horizontal 如果设为true，意思是我吃的东西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），默认false，当然是垂直方向了。keyboardDismissMode enum(‘none’, ‘interactive’, ‘on-drag’) 当我滚动的时候，是否
横向滚动视图HorizontalScrollView滚动条无法显示全部页面的问题
ambitionLlll的博客
06-16 1096
在项目中，界面中的内容较多，需要水平拖动来显示，所以使用到了HorizontalScrollView来实现。 HorizontalScrollView的使用很简单，直接在需要的XML文件中插入使用即可，比如在本项目中，在最外层的ConstraintLayout布局中插入如下代码： <HorizontalScrollView android:id="@+id/XXX_scroll_view" style="@style/universal_style_zero_zero"
ReactNative---卡顿问题及性能优化
Frankltf的博客
08-18 1277
&#13; ReactNative性能优化 在reactnative 中如果要更改DOM中的数据显示，只有通过setState方法来实现；但是当setState时，要刷新整个DOM；在一般情况先还能保证体验，但是遇到多组件嵌套和较大数据处理时，就会遇到渲染卡顿问题； 优化思路： 减少不必要的render渲染；较有效的方法就是控制好生命周期中的shouldComponent...
Scrollview嵌套HorizontalScrollView导致横向滑动卡顿现象解决
Yes ! ! ! 的专栏
11-05 858
开发中经验会遇到滑动里面嵌入滑动的问题，但是这种情况下触摸事件就会发生冲突。导致滑动非常卡，甚至出现程序停止响应。这种情况下我们一般需要重写view。下面给出重新scrollview的方法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
KungLun的博客
01-17 2260
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
react-native <ScrollView> 设置垂直滚动方向
05-24
在 React Native 中，您可以使用 `ScrollView` 组件来实现滚动视图。为了设置垂直滚动方向，您可以使用 `scrollEnabled` 属性和 `horizontal` 属性。 要将 `ScrollView` 设置为垂直滚动，请将 `scrollEnabled` 属性设置为 `true`，并将 `horizontal` 属性设置为 `false`，如下所示： ``` <ScrollView scrollEnabled={true} horizontal={false} > // 您的内容 </ScrollView> ``` 现在，您的 `ScrollView` 将只能垂直滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值