如何在React Native的FlatList底部实现模糊渐变效果

你提到的内阴影不是最优方案，更常用的是叠加渐变遮罩层或者模糊+渐变结合的方式，以下是具体实现：

方法一：使用线性渐变遮罩（最常用） #

需要先安装react-native-linear-gradient库：

npm install react-native-linear-gradient
# 或者 yarn add react-native-linear-gradient

在FlatList外层套一个容器View，将渐变层绝对定位在底部：

import React from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const DATA = Array.from({ length: 20 }, (_, i) => ({ id: i.toString(), text: `列表项 ${i+1}` }));

const ListWithGradient = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text>{item.text}</Text>
          </View>
        )}
        keyExtractor={item => item.id}
      />
      {/* 底部渐变遮罩 */}
      <LinearGradient
        style={styles.gradient}
        colors={['transparent', 'rgba(255,255,255,0.8)', 'rgba(255,255,255,1)']}
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    backgroundColor: '#fff',
  },
  listItem: {
    height: 60,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  gradient: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 80, // 调整高度控制渐变覆盖范围
  },
});

export default ListWithGradient;

这个方法通过从透明到页面背景色的线性渐变，模拟出列表底部内容逐渐淡出的效果，和你需要的视觉效果匹配。

方法二：模糊+渐变结合（更贴近"模糊渐变"） #

如果想要带模糊的层次感，可以结合@react-native-community/blur库和渐变层：

先安装依赖：

npm install @react-native-community/blur
# 或者 yarn add @react-native-community/blur

实现代码：

import React from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { BlurView } from '@react-native-community/blur';

const DATA = Array.from({ length: 20 }, (_, i) => ({ id: i.toString(), text: `列表项 ${i+1}` }));

const ListWithBlurGradient = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text>{item.text}</Text>
          </View>
        )}
        keyExtractor={item => item.id}
      />
      {/* 模糊层与渐变层叠加 */}
      <View style={styles.blurContainer}>
        <BlurView
          style={styles.blur}
          blurType="light"
          blurAmount={10}
          reducedTransparencyFallbackColor="white"
        />
        <LinearGradient
          style={styles.gradient}
          colors={['transparent', 'rgba(255,255,255,0.9)']}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
    backgroundColor: '#fff',
  },
  listItem: {
    height: 60,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  blurContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 80,
  },
  blur: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  gradient: {
    flex: 1,
  },
});

export default ListWithBlurGradient;

这种方式先对底部列表内容做模糊处理，再叠加渐变遮罩，视觉上更接近"模糊渐变"的质感。

关于内阴影的说明 #

内阴影可以通过shadowColor、shadowOffset等样式属性实现，但React Native中内阴影的跨平台兼容性较差（尤其是Android），且效果不如渐变遮罩自然，不推荐作为首选方案。如果一定要尝试，示例代码如下：

shadowColor: '#000',
shadowOffset: { width: 0, height: -5 },
shadowOpacity: 0.3,
shadowRadius: 10,
elevation: 5, // Android端阴影兼容
backgroundColor: '#fff',

但这个效果是顶部向下的阴影，和你需要的底部渐变消失效果差异较大，因此还是推荐前两种方法。

内容的提问来源于stack exchange，提问作者CODEforDREAM