React Native ScrollView滚动到结尾

vc9ivgsu  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(320)

有没有办法在发生变化时自动向下滚动react-native的ScrollView元素?
这是我在应用程序中开发聊天功能时一直在寻找的React Native 。
但是没有足够的答案,所以我才希望有人能利用它来回答我自己的问题。

des4xlb0

des4xlb01#

首先要知道的是react-native的ScrollView的scrollTo()方法,scrollTo()方法将滚动视图滚动到某个位置。
我们要使用的第二件事是ScrollView的onContentSizeChanged()事件。
除此之外,我们必须在事件中调用滚动视图,因此我们使用“useRef”钩子来创建一个对滚动视图的引用。
要使用“useRef”钩子,我们必须先导入它:

import {useRef} from "react";

创建一个常量作为scrollview组件的引用:

const scrollViewRef = useRef(null);

创建一个处理scrollView的onContentSizeChanged()事件的函数:

function scrollViewSizeChanged(height){
       // y since we want to scroll vertically, use x and the width-value if you want to scroll horizontally
       scrollViewRef.current?.scrollTo({y: height, animated: true}); 
}

定义滚动视图并将ref和onContentSizeChange事件设置为先前创建的函数。

<ScrollView ref={scrollViewRef} onContentSizeChange={(width,height) => {scrollViewSizeChanged(height)}}>
      {/* HERE GOES YOUR CONTENT*/}
</ScrollView>

使用 reactjs 原生版本进行测试:第6.4.0段
**EDIT:**找到一个方法,该方法已滚动到结尾。

您也可以像这样定义onContentSizeChanged-event:

<ScrollView ref={scrollViewRef} onContentSizeChange={() => {scrollViewRef.current?.scrollToEnd()}}>
        {/* HERE GOES YOUR CONTENT*/
</ScrollView>

为了更好地概述,我只是在定义事件的行中进行了调用,并去掉了附加函数。

相关问题