javascript - 如何在 React Native 中将图像居中放置在 View 中

Question

我有一个 GridView ，在每个单元格中我添​​加了一个 View ，然后添加了一个图像，图像没有居中代码如下

<ImageBackground
                source={require('./images/marble.jpg')}
                style={styles.backgroundImage}>

                <GridView
                    itemDimension={130}
                    items={items}
                    style={styles.gridView}
                    renderItem={item => (
                        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                            <View style={styles.CircleShapeView}>
                            <Image style={styles.iconItem} source={item.name}/>
                            </View>
                        </View>
                    )}
                />

            </ImageBackground>

和样式是

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        resizeMode: 'cover', // or 'stretch'
    },
    CircleShapeView: {
        width: 100,
        height: 100,
        borderRadius: 100,
        backgroundColor: '#00BCD4'
    },
    gridView: {
        paddingTop: 50,
        flex: 1,

    },
    itemContainer: {
        justifyContent: 'center',
        alignItems:'center',
        height:130
    },
    iconItem: {
        alignItems:'center',
        justifyContent: 'center'
    }
});

输出看起来像这样

图片应该在圆的中心，但它不是。

Answer 1

您的图像在“CircleShapeView” View 中

CircleShapeView: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: '#00BCD4',
    justifyContent: 'center',
    alignItems: 'center'
}