Как центрировать один элемент с помощью flexbox в React Native?

Question

У меня есть следующий компонент в React Native:

  <View styleName="nav">
    <Back />
    <Image styleName="logo" style={{ alignItems: "center", alignSelf: "center", justifyContent: "center" }} source={Img} />
  </View>

Как вы можете видеть, я пытаюсь почти все, чтобы центрировать логотип, но безуспешно.Каждый пример, который я вижу для flexbox, показывает> 2 элемента.

Nav имеет следующие стили:

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70;
  padding-top: 20;
}

Размер логотипа установлен:

.logo {
  width: 100;
  height: 40;
}

Прямо сейчас яя получаю что-то вроде этого:

[<Back                           Logo]

Я хочу что-то вроде этого:

[<Back            Logo               ]

Answer 1

Может быть, глупый, но попробуйте обернуть логотип в контейнер и установить width этого контейнера и width из <Back /> на 33% следующим образом:

  <View styleName="nav">
   <Back styleName="back" />
   <View styleName="logoContainer">
     <Image styleName="logo" style={{ alignItems: "center", alignSelf: "center", justifyContent: "center" }} source={Img} />
   </View>
  </View>

И в стилях:

.logoContainer {
  width: 33%;
  height: 40;
}

.back {
  width: 33%;
}

Answer 2

Попробуйте это: -

<View style={{flexDirection: 'row'}}>

<View style={{flex: 2}}>   // it may vary according to you want

 <Back /> // your Back component

</View>

<View style={{flex: 8, alignItems: 'center'}}> // you can also adjust flex 

 <Image styleName="logo" source={Img} /> // give height width to image

</view>

</View>

Answer 3

Вы можете установить <Back/> компонент flex-basis: 50%;