React Native中FlatList/ScrollView内背景图片无法重复的解决办法

方案一：使用View的背景样式替代ImageBackground #

React Native 0.63+ 支持在View的style中直接设置backgroundImage和backgroundRepeat，这是实现重复背景最简洁的方式，能避免resizeMode: 'stretch'导致的图片失真问题。

修改代码如下：

// 用外层View设置全局重复背景，替代嵌套在FlatList里的ImageBackground
<View 
  style={{
    width: '100%',
    height: '100%',
    backgroundImage: `url(${require('../../Assets/Canvas.jpg')})`,
    backgroundRepeat: 'repeat', // 横向+纵向重复，可选'repeat-x'/'repeat-y'单独控制方向
  }}
>
  <View style={{ position: 'absolute', alignSelf: 'center' }}>
    <Header />
  </View>

  <View style={{ height: VERTICAL_ITEM_PADDING }} />

  <FlatList
    showsVerticalScrollIndicator={false}
    bounces
    nestedScrollEnabled={true}
    data={videosData}
    contentContainerStyle={{ width: '100%' }}
    style={{ width: '100%' }}
    renderItem={({ item, _ }) => {
      return (
        <View style={{ width: dimensions.width, height: itemHeight, justifyContent: 'flex-end' }}>
          <View>
            <Text style={{
              color: '#fff',
              marginLeft: Platform.OS === "ios" ? 60 : 35,
              fontFamily: 'GothamRounded-Bold',
              fontSize: 18,
              allowFontScaling: true
            }}>{item?.name}</Text>
            <FlatList
              horizontal
              onMoveShouldSetResponderCapture={() => false}
              data={item?.data}
              style={{ marginLeft: Platform.OS === "ios" ? 20 : 0, width: Platform.OS === 'ios' ? '100%' : dimensions.width + NAV_BAR_HEIGHT + 20 }}
              contentContainerStyle={{ paddingRight: Platform.OS === "ios" ? 40 : 100 }}
              renderItem={({ item, index }) => <RenderItem item={item} index={index} />}
              showsHorizontalScrollIndicator={false}
            />
          </View>
        </View>
      )
    }}
    keyExtractor={(item) => item.id}
  />
</View>

方案二：自定义重复背景组件（兼容低版本RN） #

如果你的RN版本不支持backgroundRepeat，可以自定义一个平铺图片的组件，通过计算屏幕与图片尺寸，生成多个Image组件实现平铺：

import { Dimensions, Image, View, useEffect, useState } from 'react-native';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const RepeatingBackground = ({ source }) => {
  const [imgSize, setImgSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    // 获取图片原始尺寸
    Image.getSize(source, (width, height) => {
      setImgSize({ width, height });
    });
  }, [source]);

  if (imgSize.width === 0) return null;

  const cols = Math.ceil(screenWidth / imgSize.width);
  const rows = Math.ceil(screenHeight / imgSize.height);

  const tiles = [];
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      tiles.push(
        <Image
          key={`tile-${i}-${j}`}
          source={source}
          style={{
            position: 'absolute',
            left: j * imgSize.width,
            top: i * imgSize.height,
            width: imgSize.width,
            height: imgSize.height,
          }}
        />
      );
    }
  }

  return <View style={{ width: '100%', height: '100%' }}>{tiles}</View>;
};

// 使用方式：
<View style={{ width: '100%', height: '100%' }}>
  <RepeatingBackground source={require('../../Assets/Canvas.jpg')} />
  {/* 内部内容结构与方案一一致 */}
</View>

方案三：修复原嵌套FlatList的结构问题 #

你当前代码把ImageBackground放在外层FlatList的renderItem里，会导致每个列表项重复渲染背景，既浪费性能又容易引发拉伸失真。如果singleItem仅为单个数据，直接去掉外层FlatList，用View包裹内容即可：

// 去掉多余的外层FlatList，直接用View+背景组件包裹
<View style={{ width: '100%', height: '100%' }}>
  {/* 这里放方案一/方案二的背景组件 */}
  <View style={{ position: 'absolute', alignSelf: 'center' }}>
    <Header />
  </View>

  <View style={{ height: VERTICAL_ITEM_PADDING }} />

  {/* 保留内容FlatList */}
  <FlatList
    showsVerticalScrollIndicator={false}
    bounces
    nestedScrollEnabled={true}
    data={videosData}
    contentContainerStyle={{ width: '100%' }}
    style={{ width: '100%' }}
    renderItem={({ item, _ }) => {
      return (
        <View style={{ width: dimensions.width, height: itemHeight, justifyContent: 'flex-end' }}>
          <View>
            <Text style={{
              color: '#fff',
              marginLeft: Platform.OS === "ios" ? 60 : 35,
              fontFamily: 'GothamRounded-Bold',
              fontSize: 18,
              allowFontScaling: true
            }}>{item?.name}</Text>
            <FlatList
              horizontal
              onMoveShouldSetResponderCapture={() => false}
              data={item?.data}
              style={{ marginLeft: Platform.OS === "ios" ? 20 : 0, width: Platform.OS === 'ios' ? '100%' : dimensions.width + NAV_BAR_HEIGHT + 20 }}
              contentContainerStyle={{ paddingRight: Platform.OS === "ios" ? 40 : 100 }}
              renderItem={({ item, index }) => <RenderItem item={item} index={index} />}
              showsHorizontalScrollIndicator={false}
            />
          </View>
        </View>
      )
    }}
    keyExtractor={(item) => item.id}
  />
</View>

内容的提问来源于stack exchange，提问作者Muhammad Rafeh Atique