css - React Native Image 未以 View 为中心

Question

我正在尝试将 Image 居中在 View 内水平和垂直问题是，无论我在代码中输入什么，它似乎始终处于相同位置。我有另一个 View 的代码从另一个屏幕，这正是我所需要的，但是对于其他页面，它没有响应。

这是我的代码:

<View style={styles.header}>
        <Icon
            raised
            name='chevron-left'
            type='octicon'
            color='#f50'
            onPress={() => this.props.navigation.goBack()}
            containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
        <Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
       </View>

const styles = StyleSheet.create({
        header:{
        backgroundColor:'#ff4714', 
        height:SCREEN_HEIGHT/8,
        flexDirection: 'row' 

    }
});

编辑:我删除了 <Image> 的所有样式除了 width和 height图像停留在同一个地方。我不知道该怎么做

这是世博小吃https://snack.expo.io/SyCO!ree8

Answer 1

您需要将 justifyContent:'center' 和 alignSelf:'center' 添加到您的图像样式中，

只需检查代码:

 <View style={{
        flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
      }}>
       <Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}}         />
      </View>

这是世博会小吃:expo-snack

更新:

这是我更新的 EXPO 小吃:

check here

希望对你有帮助