React Native图片网格中Image缩放模式出现异常伪影求助

需求说明 #

• 创建可滚动窗口
• 实现两列网格布局的方形面板
• 每个方形面板包含一张完整显示（不裁剪）的图片
• 图片数量为奇数时，最后一个网格方块留空

遇到的问题 #

模拟器运行后，每张图片的顶部和底部出现奇怪伪影，尝试center和contain两种resizeMode均无法解决。

相关代码 #

import React from "react";
import {
  Image,
  StyleSheet,
  View,
  FlatList,
} from "react-native";

const flatListNumberOfColumns = 2;

function ImageGridView(props) {
  const flatListData = [
    { key: 1, name: "name1" },
    { key: 2, name: "name2" },
    { key: 3, name: "name3" },
    { key: 4, name: "name4" },
    { key: 5, name: "name5" },
    { key: 6, name: "name6" },
    { key: 7, name: "name7" },
    { key: 8, name: "name8" },
    { key: 9, name: "name9" },
  ];

  const formatData = (data, numColumns) => {
    const numberOfFullRows = Math.floor(data.length / numColumns);
    let numberOfRemainderElements = data.length - numberOfFullRows * numColumns;

    if (numberOfRemainderElements > 0) {
      while (numberOfRemainderElements !== numColumns) {
        data.push({ key: `blank-${numberOfRemainderElements}`, empty: true });
        numberOfRemainderElements += 1;
      }
    }

    return data;
  };

  const flatListRenderItem = ({ item, index }) => {
    if (item.empty === true) {
      return (
        <View
          style={styles.flatListItem}
        />
      );
    }
    return (
      <View style={styles.flatListItem}>
        <Image
          style={styles.photo}
          source={require("../assets/images/avatar3-solid.png")}
        />
      </View>
    );
  };

  return (
    <View style={styles.mainContainer}>
      <FlatList
        data={formatData(flatListData, flatListNumberOfColumns)}
        renderItem={flatListRenderItem}
        numColumns={flatListNumberOfColumns}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: "red",
    flex: 1,
    justifyContent: "center",
    marginTop: 40,
  },
  photo: {
    resizeMode: "contain",
    justifyContent: "center",
    alignItems: "center",
    flex: 1,
    maxHeight: "100%",
    maxWidth: "100%",
    backgroundColor: "yellow",
    borderColor: "red",
    borderWidth: 10,
    borderRadius: 66,
  },
  flatListItem: {
    flex: 1,
    flexDirection: "column",
    margin: 1,
    aspectRatio: 1,
    backgroundColor: "black",
  },
});

export default ImageGridView;

测试图片 #

问题原因与解决办法 #

原因分析 #

1. Image组件设置了justifyContent和alignItems属性，这两个是View组件的布局属性，对Image无效，会干扰渲染计算。
2. Image同时使用flex:1和borderWidth，结合父容器的aspectRatio:1，导致尺寸计算偏差，出现伪影。

解决步骤 #

1. 移除Image样式中的justifyContent、alignItems属性，将布局控制移到父容器flatListItem中。
2. 替换Image的flex:1为width: '100%'和height: '100%'，确保图片填充父容器的同时保持比例。
3. 若需要边框，将borderColor、borderWidth、borderRadius移到父容器flatListItem上，避免Image的边框影响尺寸计算。

修改后的样式示例 #

const styles = StyleSheet.create({
  mainContainer: {
    backgroundColor: "red",
    flex: 1,
    marginTop: 40,
  },
  photo: {
    resizeMode: "contain",
    width: "100%",
    height: "100%",
    backgroundColor: "yellow",
  },
  flatListItem: {
    flex: 1,
    margin: 1,
    aspectRatio: 1,
    backgroundColor: "black",
    borderColor: "red",
    borderWidth: 10,
    borderRadius: 66,
    justifyContent: "center",
    alignItems: "center",
  },
});

这样修改后，图片会在方形面板内完整显示，伪影问题也会消失。

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