React Native ScrollView如何跳到顶部

最新推荐文章于 2025-01-18 22:11:16 发布

原创最新推荐文章于 2025-01-18 22:11:16 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在React Native中使用ScrollView组件并通过点击按钮使ScrollView返回到顶部位置的方法。提供了两种实现方式：一种带有滚动动画效果，另一种则没有动画直接滚动。

React Native ScrollView How to Jump to the Top ?

页面中有个ScrollView,点击某个Button，跳到ScrollView的顶部。

可以参考以下例子:

<ScrollView ref={component => this._scrollView = component} />

//this._scrollView.scrollTo(0, 0); 这个有动画效果

this._scrollView.scrollWithoutAnimationTo(0,0); //这个没有动画效果

－－－－
参考：http://stackoverflow.com/questions/29829375/how-to-scroll-to-bottom-in-react-native-listview

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_16691

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向

02-14

在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...

React Native之ScrollView控件详解

热门推荐

xiangzhihong8的专栏

12-17

2万+

概述ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所

参与评论您还未登录，请先登录后发表或查看评论

React Native使用ScrollView将页面滚动到底部/顶部

weixin_47002803的博客

12-02

923

React Native使用ScrollView将页面滚动到底部/顶部

android listview滚动到顶部

weixin_30482383的博客

11-07

573

1.为了实现类似IOS点击状态栏，列表回滚到顶部的功能（要平滑滚动效果），android上点击一个按钮或是图片什么的也可以让listview一次性滚动到顶部（滑动太多页时，一次可能滚不到顶部，使用handler定时监听，继续滚动，直至回到顶部） public static void scrollToListviewTop(final AbsListView listView) ...

ListView自动滑动到顶部（底部）的方法总结(3种方法)

知行合一

11-01

4530

想要实现一个listview初始化时和数据变化后显示到列表的最末，简单地说就是像聊天窗或者是日志输出那样的情景。开始没去仔细看listview对象的属性，按照惯性思维就去调用 listView.scrollTo(offset_x,offset_y); 然后又被一篇奇怪的日志误导了什么外层容器和内层两个view …干！浪费我时间。其实listView元素直接在xml里就可以简单定义实现好这个效果

Reac-Native ScrollView回到顶部

大灰狼的小绵羊哥哥的博客

05-26

1237

ScrollView 是一个滚动控件，当内容显示不全时可以通过滚动显示。属性： View props… :View的所有属性 contentContainerStyle：内容容器的样式，所有的子视图都会包裹在内容容器内。 horizontal：为true时，横向滚动 keyboardDismissMode ：用户拖拽滚动视图的时候，是否要隐藏软键盘。 non

React Native 之 ScrollView的翻到顶部功能

weixin_38289699的博客

05-05

5118

先说明一下使用背景吧==>用ScrollView写的一个页面,页面底部有一个下一篇按钮,但是点击按钮重新render之后,页面依旧在底部,没有自动跳到顶部,视觉效果很差解决的方法是在ScrollView的标签中加入相当于类名的属性 ScrollView ref='totop'> View style={styles.container}>

ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview

最新发布

2501_90225735的博客

01-18

385

【代码】ReactNative进阶（二十五）：ScrollView滚动视图组件详解_reactnativescrollview。

6.2React Native基础ScrollView和FlatList；

Tiger的专栏

02-13

4568

目录 1.ScrollView 1.1ScrollView介绍 1.2ScrollView常用属性 1.3ScrollView常用方法 1.4. 获取原生事件 2.FlatList 2.1FlatList介绍 2.2FlatList常用属性 2.3FlatList常用方法 2.4FlatList示例 2.4.1示例 2.4.2.FlatList添加头部和尾部组件 2...

React Native控件之ScrollView组件详解

MN1107

06-25

1万+

React Native控件之ScrollView组件详解（一）前言这篇文章我们来讲解一下ScrollView，这个组件是在实际开发过程中用得非常多的，因为移动设备本来就比较小，所以只能通过滚动视图来包含更多的视图。该组件学习相对之前的有一定难度。该组件封装了Android平台的ScrollView控件和iOS平台的UIScrollView控件，并且提供了触摸事件“responder”系统功能。使用

React Native 函数组件 ScrollView 滚动到顶部

qq_40088255的博客

04-10

668

React Native 函数组件 ScrollView 滚动到顶部 // 引入 useRef import React, {useRef} from "react"; // 定义变量 let scrollRef = useRef(); // 页面引用 <ScrollView style={styles.scrollContent} ref={scrollRef}> <View style={styles.content}>

ReactNative ScrollView 滚动到顶部或指定位置

lixiaoshuai_91的博客

08-17

3164

最近项目使用ReactNative来写一个模块，有一个功能是，输入完成后，刷新页面并滚动的顶部页面比较长，我嵌套了一层ScrollView，刷新数据后并不能滚动到顶部，后来找官方文档，以下是解决方案 1.全局声明一个ScrollView _scrollView: ScrollView | null | undefined; 2.在ScrollView中赋值 <ScrollView ref={component => this._scrollView = component}>&

关于scrollTo()方法，滚动到顶部失效的解决

11-09

4068

项目场景：当页面刷新，判断页面是否在顶部，如果不在顶部就滚动到顶部问题描述：判断距离顶部的高度，如果大于0就执行window.scrollTo(0, 0)，但是在onload中执行，直接写都没用效果 window.addEventListener("load", function (event) { window.scrollTo(0, 0) }); 原因分析：确切原因没用找到，猜测一下，估计是滚动相关的DOM没用初始化完成就执行该方法，导致无法

react-native-scrolltotop 回到顶部－组件（ios/android）

大灰狼的小绵羊哥哥的博客

03-08

1990

react-native-scrolltotop https://github.com/yzsolo/react-native-scrolltotop a RN component make list come back to top. IOS && ANDROID －－－ Installation npm install --save react-nati

react native ScrollView自动滑动到顶部

H_Ydd的博客

08-08

3440

react-native 自动滚到屏幕顶部，模仿微信朋友圈评论自动定位 <ScrollView showsVerticalScrollIndicator={false} style={[styles.column,styles.Flex]} ref={(r) => this.scrollview = r} //当控件被创建后将ScrollView这个对象的引用就传

[RN] React Native ScrollView自动滑动到顶部

weixin_30417487的博客

05-24

1266

react-native 自动滚到屏幕顶部，模仿微信朋友圈评论自动定位<ScrollViewshowsVerticalScrollIndicator={false}style={[styles.column,styles.Flex]}ref={(r) => this.scrollview = r} 自定滑到顶部代码： this.scrollview.scroll...

Android 页面包含ScrollView时，软键盘弹出把布局顶上去，解决方法

as7207182的博客

12-08

1998

这是最近项目的一个布局，红色框的Listview下有个按钮，所以选择嵌套在ScrollView里。那么问题来了，因为红色框之外还有很多的布局，所以导致在填写红色框下面的特征说明，弹出软键盘时，整个页面会往上顶，导致蓝色的标题不见了（如下图，注意黄色框），影响用户体验，所以得解决了。百度之后，看一下网上流行的三个方法： 1.getWindow().setSoftInpu...

react native的ScrollView滑动到指定位置

peach

01-28

1万+

情景：Modal做的选择弹出框，传入用户可选择的数据源，用户选择之一，下次点开时，自动到当前选择的参数位置附近，方便用户调整 ref={scrollView => { if(scrollView !== null){ setTimeout(()=>{ //父组件传入的

ScrollView点击按钮回到顶部、底部

简单记录工作和学习

02-21

1256

ScrollView点击按钮回到顶部、底部