React Native ScrollView 滚动到结束

Question

有没有办法在更改时自动向下滚动 react-native 的 ScrollView 元素？

这是我在开发我的应用程序中的聊天功能时一直在寻找 react-native 的东西。

虽然没有足够的答案。这就是为什么我要回答我自己的问题，希望有人可以利用它。

Answer 1

首先要知道的是react-native的ScrollView的scrollTo()方法。 scrollTo()方法将scrollview滚动到某个位置。

我们要利用的第二件事是 ScrollView 的 onContentSizeChanged() 事件。

除此之外，我们还必须在我们的事件中调用我们的滚动视图。因此，我们使用“useRef”挂钩来创建对滚动视图的引用。

要使用“useRef”挂钩，我们必须先导入它：

import {useRef} from "react";

创建一个常量作为对滚动视图组件的引用：

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>

使用 react-native 版本测试：6.4.0

编辑： 找到一个已经滚动到结束的方法。

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

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

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

React Native ScrollView 滚动到结束

React Native ScrollView scroll to end

react-native

react-hooks

scrollview