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>

И это - закуска на выставке: Экспо-закуска

ОБНОВЛЕНИЕ:

ЗДЕСЬ МОЙ ОБНОВЛЕННЫЙ СНАК ЭКСПО:

проверить здесь

Надежда это помогает

Answer 2

Попробуйте добавить:

alignItems: 'center',
justifyContent: 'center'

к вашему header стилю

Возможно, вам также потребуется добавить flex:1, в зависимости от состояния вашего View