如何在反应原生的视图中居中图像答案

【问题标题】：how to centre the image inside a view in react native如何在反应原生的视图中居中图像
【发布时间】：2018-03-07 11:24:24
【问题描述】：

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

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

输出看起来像这样

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

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

您的图像位于视图“CircleShapeView”内

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

【讨论】：

是的正确，但我希望它位于中心
只需将 justifyContent 和 alignItems 设置为 CircleShapeView 类的中心

【解决方案2】：

设置在视图中

justifycontent:center
alignitems:center

【讨论】：