React Native - 在 FlatList 中使用“flex”

Question

我开始学习 React Native，我正在尝试使用图像创建 3 列网格。我一直在使用 FlatList 的 numColumns 属性来指定 3 列，然后为我的图像设置 flex:1 以便它们应该填充列的空间。然而flex:1 使我的图像都没有出现，而尝试height:100,aspectRatio:1 在列中显示我的所有图像。知道这是为什么吗？我的代码如下：

export default class ArtScrollView extends React.Component {
    _renderItem = (item) =>
        (
            <Image style={styles.art} source={{uri:item.item.imgFilePath}}/>
        )
    render() {
        return(
            <FlatList numColumns={3}
            data={Object.values(this.props.pods)}
            renderItem={this._renderItem}/>
        );
    }
}

const styles = StyleSheet.create({
    art:{
        height:100,
        aspectRatio:1,
        //flex:1, <- Having this instead of specifying the height doesn't work
        marginRight:10,
    }
  });

Answer 1

• 在 ReactNative 中自动调整图像大小不起作用。它只是没有。 在展示图片之前，您需要知道图片的尺寸。
• 很容易使用var {height, width} = Dimensions.get('window'); 并将它们用作图片大小的参考。
• 使用检查器并查看（并理解）FlatList 实际为您呈现的内容。您可能会理解为什么事情不起作用（不仅在这种情况下，而且在一般情况下）