如何将图像置于视图中以反应原生

Question

我有一个网格视图，在每个单元格中我添​​加了一个视图，然后是一个图像，图像不是居中，代码如下

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

和样式

＆＃13;

＆＃13;

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'
    }
});

＆＃13;

＆＃13;

＆＃13;

输出看起来像这样

图像应位于圆圈的中心，但不是。

Answer 1

您的图片位于视图内; CircleShapeView＆＃39;

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

Answer 2

设置为视图

justifycontent:center
alignitems:center