react-native - React Native - 在 FlatList 中使用 "flex"

Question

我开始学习 React Native，我正在尝试用图像创建 3 列的网格。我一直在使用numColumns FlatList 的 prop 指定 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 实际为您呈现的内容。您可能会理解为什么事情不起作用(不仅在这种情况下，而且在一般情况下)