React Native：如何给ScrollView底部的文本添加渐变透明效果

你要实现的是ScrollView内容未完全展示时底部显示渐变遮罩的效果，可按照以下方案实现：

实现步骤 #

• 首先安装线性渐变依赖库：

npm install react-native-linear-gradient
# 或使用yarn
yarn add react-native-linear-gradient

• 核心实现逻辑：
  通过获取ScrollView的可视高度、内部文本的实际高度，结合滚动位置判断是否需要展示渐变遮罩，完整代码示例如下：

import React, { useState, useRef, useEffect } from 'react';
import { ScrollView, Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const ScrollWithFade = ({ text }) => {
  const scrollViewRef = useRef(null);
  const textRef = useRef(null);
  const [showFade, setShowFade] = useState(false);
  const MAX_HEIGHT = 400;

  // 组件加载完成后判断是否需要显示渐变遮罩
  useEffect(() => {
    textRef.current?.measure((x, y, width, textHeight) => {
      if (textHeight > MAX_HEIGHT) {
        setShowFade(true);
      }
    });
  }, [text]);

  // 监听滚动事件，滚动到底部时隐藏渐变
  const handleScroll = (e) => {
    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
    const isBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 20;
    setShowFade(!isBottom);
  };

  return (
    <View style={{ position: 'relative', maxHeight: MAX_HEIGHT }}>
      <ScrollView
        ref={scrollViewRef}
        style={{ maxHeight: MAX_HEIGHT }}
        onScroll={handleScroll}
        scrollEventThrottle={16}
      >
        <Text ref={textRef}>{text}</Text>
      </ScrollView>
      {showFade && (
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: 60,
            pointerEvents: 'none'
          }}
        />
      )}
    </View>
  );
};

export default ScrollWithFade;

补充说明 #

• 代码里的渐变颜色可以根据你的页面背景色自行调整，只要把rgba的后三个值换成和背景色匹配的数值即可。
• pointerEvents: none属性保证渐变遮罩不会遮挡ScrollView的滚动交互。
• 如果你不想引入第三方库，也可以用React Native 0.68+自带的MaskedView配合渐变实现，核心逻辑和上述代码一致。

内容的提问来源于stack exchange，提问作者Evita Urbanoviča