React Native Expo ScrollView 滚动到底部 - Javascript

在React Native Expo应用中，如何实现ScrollView滚动到底部呢？这里提供两种方法解决问题。

方法一：使用onContentSizeChange

使用onContentSizeChange可以监测到ScrollView中的内容是否发生变化，如果发生变化，我们可以通过scrollToEnd方法把ScrollView滚动到底部。

import React, { useRef } from 'react';
import { ScrollView, View } from 'react-native';

const MyComponent = () => {
  const scrollViewRef = useRef();
  
  const onContentSizeChangeHandler = () => {
    scrollViewRef.current.scrollToEnd({ animated: true });
  };
  
  return (
    <ScrollView
      ref={scrollViewRef}
      onContentSizeChange={onContentSizeChangeHandler}
    >
      <View>
        {/* ScrollView的内容 */}
      </View>
    </ScrollView>
  );
};

方法二：使用onLayout

使用onLayout可以获取到ScrollView的高度，我们可以通过setY方法把ScrollView滚动到底部。

import React, { useRef } from 'react';
import { ScrollView, View } from 'react-native';

const MyComponent = () => {
  const scrollViewRef = useRef();
  
  const onLayoutHandler = () => {
    scrollViewRef.current.scrollTo({ y: scrollViewRef.current.contentSize.height, animated: true });
  };
  
  return (
    <ScrollView
      ref={scrollViewRef}
      onLayout={onLayoutHandler}
    >
      <View>
        {/* ScrollView的内容 */}
      </View>
    </ScrollView>
  );
};

以上两种方法均可实现ScrollView滚动到底部的功能，开发者可根据自己的需求选择其中一种。