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

最新推荐文章于 2023-06-12 11:11:36 发布
原创 最新推荐文章于 2023-06-12 11:11:36 发布 · 6.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-native #scrollview #滑动 #滚动

本文描述了在使用React Native的ScrollView组件时遇到的内容无法滑动的问题，并解释了原因是未设置组件及其父级的高度属性。解决方案是正确配置这些高度属性。

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

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

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

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

 

RN TextInput导致ScrollView的上下滑动失效的解决办法
qq_30483517的博客
06-13 842
RN环境 react-native:0.59 最近在开发中发现,Scrollview里的TextInput在editable设置为false之后，在android手机上会出现手指按在TextInput上滑动导致无响应的现象。解决方法是在TextInput的上方放一个透明的mask,长度和高度正好遮住TextInput即可。 伪代码如下： <View > <TextInput autoCapitalize='none' und
react-native组件ScrollView
番薯大佬的专栏
05-22 3154
效果图代码示例import React, { Component } from 'react'; import { Dimensions, StyleSheet, View, Text, Alert, TouchableOpacity, Image, Button, ScrollView } from 'react-nativ...
React-Native之ScorllView无法滑动
hp627578067的博客
05-06 2432
在使用React-Native进行开发的时候，ScorllView通常作为最顶层的元素，因此设置Flex：1属性时需谨慎。 出现无法滑动的情况时，解决办法如下： 1.确认XXXXX属性，是否设置为不滚动 2.检查flex：1样式，若无父组件且设置为flex：1，则需去掉该样式 ...
react native Scrollview在某些时候滚动无效
陈柱的博客
10-31 5372
react native 在某些时候滚动无效 今天在使用Scrollview的时候滚动没有效果，直接上代码： return( View style={{flex:1}}> NavigatorHeader nav={this.props.nav} title="首页">NavigatorHeader> HomeCategory nav={
react native ScrollView滚动不起作用
xiaoxnn的博客
11-29 4305
在做页面初始化时， 想ScrollView跳转到指定的位置，结果发现代码执行了，却没有跳到指定的位置
react-native使用ScrollView组件出现不滑动或者隐藏的解决方案
weixin_43660626的博客
09-22 4009
1、ScrollView组件上不能存在高度和flex， 2、ScrollView如果为嵌套的子组件，其父组件上必须有固定高度
react native 中ScrollView 滚动显示不全问题
三七二十一的博客
06-01 7069
使用ScrollView的时候,遇到一个问题,里面的内容靠下的部分需要用力拉才能看见,一松开又弹回去了(原谅我拙劣的叙述,不知道用什么样的专业术语) 看了官网的解释才知道原因: ScrollView 的功能就是把其包含的不确定高度的内容通过滚动操作在一个固定高度的窗口显示,所以 ScrollView必须有一个确定的高度才能正常工作!!! 要给一个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 2211
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...
android HorizontalScrollView嵌套RecyclerView横向不能滑动问题
程序员张三的笔记
02-08 6357
开发场景：在 HorizontalScrollView内嵌套RecyclerView和其他内容，要求其他控件和RecyclerView一起横向滑动，而RecyclerView自身滑动事件不响应。问题分析：1.HorizontalScrollView内嵌套RecyclerView，发现HorizontalScrollView不能横向滑动；                2.RecyclerView于...
react native中ScrollView嵌套TextInput安卓端有滑动问题
weixin_38009285的博客
06-12 519
（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 752
contentContainerStyle 这个样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。horizontal 如果设为true，意思是我吃的东西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），默认false，当然是垂直方向了。keyboardDismissMode enum(‘none’, ‘interactive’, ‘on-drag’) 当我滚动的时候，是否
横向滚动视图HorizontalScrollView滚动条无法显示全部页面的问题
ambitionLlll的博客
06-16 1303
在项目中，界面中的内容较多，需要水平拖动来显示，所以使用到了HorizontalScrollView来实现。 HorizontalScrollView的使用很简单，直接在需要的XML文件中插入使用即可，比如在本项目中，在最外层的ConstraintLayout布局中插入如下代码： <HorizontalScrollView android:id="@+id/XXX_scroll_view" style="@style/universal_style_zero_zero"
ReactNative---卡顿问题及性能优化
Frankltf的博客
08-18 1438
&#13; ReactNative性能优化 在reactnative 中如果要更改DOM中的数据显示，只有通过setState方法来实现；但是当setState时，要刷新整个DOM；在一般情况先还能保证体验，但是遇到多组件嵌套和较大数据处理时，就会遇到渲染卡顿问题； 优化思路： 减少不必要的render渲染；较有效的方法就是控制好生命周期中的shouldComponent...
Scrollview嵌套HorizontalScrollView导致横向滑动卡顿现象解决
Yes ! ! ! 的专栏
11-05 935
开发中经验会遇到滑动里面嵌入滑动的问题，但是这种情况下触摸事件就会发生冲突。导致滑动非常卡，甚至出现程序停止响应。这种情况下我们一般需要重写view。下面给出重新scrollview的方法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
老猿阿浪的博客
01-17 2411
完美解决RN中ScollView包含多个TextInput手指触摸到Textinput区域内上下滑动失效的问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值