React Native Grid View：图像弄乱了视图

Question

我正在构建一个需要网格视图的应用程序。到目前为止，我的网格工作正常，如下图所示，红色方块的位置很好。但是，当我在每个框中添加图像时，它会弄乱网格（第二张图片）。有什么想法吗？

这是屏幕截图（第一张图片有边距且居中）

第二张图片的中间和右侧没有更多的边距

这是生成视图的代码：

    renderData = (data) => {
        return (
            <View style={styles.box}>
                <Text style={styles.boxText}>{data.name}</Text>

                // This is what I add to display the image
                <Image 
                 source={data.image} 
                 style={styles.boxImage} />
            </View>
        );
    }

    renderPage() {
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.filterButton}>
                    <Text style={styles.filterButtonMessage}>
                        Occasions
                    </Text>
                </TouchableHighlight>
                <ListView contentContainerStyle={styles.list}
                    dataSource={this.state.data2}
                    renderRow={this.renderData} />
            </View>
        );
    }
    var styles = StyleSheet.create({
         container: {
             flex: 1,
        },
        list: {
             flex: 1,
             flexDirection: 'row',
             flexWrap: 'wrap',
             justifyContent: 'center'
        },
        box: {
            width: 150,
            backgroundColor: 'red',
            height: 150,
            alignItems: 'stretch',
            margin: 3
        },
        boxImage: {
            flex: 1
        },
        boxText: {
            flex: 1,
            fontWeight: '900',
            fontSize: 15,
            color: 'white',
            position: 'absolute',
            bottom: 5,
            right: 5,
            backgroundColor: 'rgba(0,0,0,0)'
       }
    });

Answer 1

你试过吗...

boxImage: { 
    flex: 1, 
    width: 150, 
    height: 150,
},

React Native Grid View：图像弄乱了视图

React Native Grid View : Image messes up the view

ios

flexbox

reactjs

react-native