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

最新推荐文章于 2023-06-12 11:11:36 发布
最新推荐文章于 2023-06-12 11:11:36 发布
阅读量6.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： RN 文章标签： react-native scrollview 滑动 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baconcc/article/details/99549081
本文描述了在使用React Native的ScrollView组件时遇到的内容无法滑动的问题，并解释了原因是未设置组件及其父级的高度属性。解决方案是正确配置这些高度属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

 

移动跨平台框架ReactNative滚动视图ScrollView【17】，学前端程序开发
2301_76348206的博客
03-31 772
=就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。==就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。
react-native组件ScrollView
番薯大佬的专栏
05-22 3133
效果图代码示例import React, { Component } from 'react'; import { Dimensions, StyleSheet, View, Text, Alert, TouchableOpacity, Image, Button, ScrollView } from 'react-nativ...
React-Native之ScorllView无法滑动
hp627578067的博客
05-06 2403
在使用React-Native进行开发的时候，ScorllView通常作为最顶层的元素，因此设置Flex：1属性时需谨慎。 出现无法滑动的情况时，解决办法如下： 1.确认XXXXX属性，是否设置为不滚动 2.检查flex：1样式，若无父组件且设置为flex：1，则需去掉该样式 ...
react native Scrollview在某些时候滚动无效
陈柱的博客
10-31 5319
react native 在某些时候滚动无效 今天在使用Scrollview的时候滚动没有效果，直接上代码： return( View style={{flex:1}}> NavigatorHeader nav={this.props.nav} title="首页">NavigatorHeader> HomeCategory nav={
react native ScrollView滚动不起作用
xiaoxnn的博客
11-29 4240
在做页面初始化时， 想ScrollView跳转到指定的位置，结果发现代码执行了，却没有跳到指定的位置
react-native使用ScrollView组件出现不滑动或者隐藏的解决方案
weixin_43660626的博客
09-22 3947
1、ScrollView组件上不能存在高度和flex， 2、ScrollView如果为嵌套的子组件，其父组件上必须有固定高度
react-native中使用ScrollView组件自己封装走马灯
01-08
使用ScrollView替代View可以实现安全范围内的滚动 showsVerticalScrollIndicator隐藏...} from 'react-native'; const screenWidth = Math.round(Dimensions.get('window').width); const App = () => { const scrollR
react-native-swipeable:功能强大的React Native滑动组件
05-11
功能强大的React Native滑动组件。 同时支持iOS和Android。 安装 npm i --save react-native-swipeable 用法 用可Swipeable组件将ListView / TableView项包装起来： import Swipeable from 'react-native-...
react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向
02-14
在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...
react-native 滑动ScrollView 隐藏导航
xiao_ci1988的博客
05-21 2173
react-native 滑动ScrollView 隐藏导航 import React from ‘react’ import {View, Text, ScrollView, Button, StyleSheet,Animated} from ‘react-native’ import { observer, inject } from ‘mobx-react’ @inject([‘homeSt...
react native 中ScrollView 滚动显示不全问题
三七二十一的博客
06-01 7008
使用ScrollView的时候,遇到一个问题,里面的内容靠下的部分需要用力拉才能看见,一松开又弹回去了(原谅我拙劣的叙述,不知道用什么样的专业术语) 看了官网的解释才知道原因: ScrollView 的功能就是把其包含的不确定高度的内容通过滚动操作在一个固定高度的窗口显示,所以 ScrollView必须有一个确定的高度才能正常工作!!! 要给一个ScrollView确定一个高度的话，要...
android HorizontalScrollView嵌套RecyclerView横向不能滑动问题
程序员张三的笔记
02-08 6262
开发场景：在 HorizontalScrollView内嵌套RecyclerView和其他内容，要求其他控件和RecyclerView一起横向滑动，而RecyclerView自身滑动事件不响应。问题分析：1.HorizontalScrollView内嵌套RecyclerView，发现HorizontalScrollView不能横向滑动；                2.RecyclerView于...
react native中ScrollView嵌套TextInput安卓端有滑动问题
weixin_38009285的博客
06-12 435
（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 717
contentContainerStyle 这个样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。horizontal 如果设为true，意思是我吃的东西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），默认false，当然是垂直方向了。keyboardDismissMode enum(‘none’, ‘interactive’, ‘on-drag’) 当我滚动的时候，是否
横向滚动视图HorizontalScrollView滚动条无法显示全部页面的问题
ambitionLlll的博客
06-16 1260
在项目中，界面中的内容较多，需要水平拖动来显示，所以使用到了HorizontalScrollView来实现。 HorizontalScrollView的使用很简单，直接在需要的XML文件中插入使用即可，比如在本项目中，在最外层的ConstraintLayout布局中插入如下代码： <HorizontalScrollView android:id="@+id/XXX_scroll_view" style="@style/universal_style_zero_zero"
ReactNative---卡顿问题及性能优化
Frankltf的博客
08-18 1399
&#13; ReactNative性能优化 在reactnative 中如果要更改DOM中的数据显示，只有通过setState方法来实现；但是当setState时，要刷新整个DOM；在一般情况先还能保证体验，但是遇到多组件嵌套和较大数据处理时，就会遇到渲染卡顿问题； 优化思路： 减少不必要的render渲染；较有效的方法就是控制好生命周期中的shouldComponent...
Scrollview嵌套HorizontalScrollView导致横向滑动卡顿现象解决
Yes ! ! ! 的专栏
11-05 916
开发中经验会遇到滑动里面嵌入滑动的问题，但是这种情况下触摸事件就会发生冲突。导致滑动非常卡，甚至出现程序停止响应。这种情况下我们一般需要重写view。下面给出重新scrollview的方法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
老猿阿浪的博客
01-17 2366
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值