FlatList 中的图像未显示答案

【问题标题】：Images in FlatList not displayedFlatList 中的图像未显示
【发布时间】：2021-07-28 22:22:06
【问题描述】：

我正在使用 react native 和 firebase 创建一个有点类似于社交网络的应用程序。在个人资料屏幕中，我试图显示用户在具有 3 列的 FlatList 中发布的图像。我的问题是，当试图显示图像以使其占据 FlatList 的整个宽度时，它们似乎没有显示出来。但是，当我设置固定高度时，它们会这样做。我想让它们以 1/1 的纵横比显示，而不必固定高度。

这是我的代码：

            <View style={styles.galleryContainer}>
                <FlatList
                    numColumns={3}
                    horizontal={false}
                    data={posts}
                    renderItem={({ item }) => (
                        <View style={styles.imageContainer}>
                            <Image
                                style={styles.image}
                                source={{ uri: item.downloadURL }}
                            />
                        </View>
                    )}
                />
            </View>

还有样式：

    galleryContainer: {
        flex: 1
    },
    image: {
        flex: 1,
        aspectRatio: 1/1,
        height: 120

    },
    imageContainer: {
        flex: 1 / 3
    }

我尝试将高度设置为 100%，但也没有用，有什么可能导致此问题的想法吗？

【问题讨论】：

你试过设置width: 120, aspectRatio: 1吗？
事情是我想尽量避免设置固定的宽度/高度，据我所见，这可以通过不确定高度或宽度来完成，但这对我不起作用
啊，我明白了。不幸的是，对于网络图像，您必须至少指定一个维度才能显示它们。这是 RN 图像组件的限制
好的，谢谢！有没有办法设置相对于父视图或屏幕大小的大小？
尝试在图片上设置resizeMode='contain'

标签： javascript firebase image react-native react-native-flatlist

【解决方案1】：

编辑：我通过使用 useWindowDimensions 并获取窗口大小并将其除以 3 来解决它。这是我用来设置样式的代码：

const imageWidth = Math.floor(useWindowDimensions().width/3);


style={{width:imageWidth, aspectRatio:1/1, flex:1, height:imageWidth}}

【讨论】：