如何在 React Native 中使用 flexbox 将一个项目居中？答案

【问题标题】：How to center one item with flexbox in React Native?如何在 React Native 中使用 flexbox 将一个项目居中？
【发布时间】：2020-01-25 05:11:19
【问题描述】：

我在 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               ]

【问题讨论】：

标签： css reactjs react-native flexbox

【解决方案1】：

您可以设置<Back/> 组件的flex-basis: 50%;

【讨论】：

【解决方案2】：

也许很傻，但尝试将徽标包装到容器中并将该容器的 width 和 <Back /> 的 width 设置为 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%;
}

【讨论】：

【解决方案3】：

试试这个：-

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

【讨论】：