在反应原生弹性框中右对齐答案

【问题标题】：Right align in react native flex box在反应原生弹性框中右对齐
【发布时间】：2020-03-10 16:29:54
【问题描述】：

如何按照 UI 编写代码？我希望两个视图左对齐，一个视图右对齐，三个视图连续。

这是我的代码，它显示所有左对齐

 <View style={{
    flexDirection: 'row',
    flex: 1,
    borderTopWidth: isIphoneX() ? 35 : 25,
    backgroundColor: color.PRIMARY_COLOR,
    padding: 20
}} >
    <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
        //some content
    </View>

    <View style={{ flexDirection: 'column', justifyContent: 'center', paddingLeft:8 }}>
        //some content
    </View>

    <View style={{alignSelf:'flex-end' }}>
        //some content
    </View>
</View>

【问题讨论】：

标签： reactjs react-native flexbox

【解决方案1】：

试试这个

<View
  style={{
    flexDirection: "row",
    flex: 1,
    borderTopWidth: isIphoneX() ? 35 : 25,
    backgroundColor: color.PRIMARY_COLOR,
    padding: 20
  }}
>
  <View style={{ flexDirection: "column", justifyContent: "center" }}>
    //some content
  </View>

  <View
    style={{
      flexDirection: "column",
      justifyContent: "center",
      paddingLeft: 8
    }}
  >
    //some content
  </View>

  <View style={{ alignSelf: "flex-end" , position:'absolute' , right:5 }}>//some content</View>
</View>

【讨论】：

谢谢 :) 这有帮助，但是通过使用绝对位置，其他 UI 问题出现了。有没有其他方法可以在不使用绝对位置的情况下做到这一点？
@Dimalka 很高兴它有帮助:) 是的，你有几种方法可以做到这一点。使用您的代码，最简单的方法是使位置绝对并赋予它权利。除此之外，您可以将基本容器视图划分为两个单独的视图，并在其下使用带有右子视图的 flex-end
@Dimalka 如果此解决方案有效，请不要忘记投票并将此答案标记为已接受的正确答案 btw :)
我会在评论中尝试解决方案，因为您的代码也解决了问题，我已将其标记为答案。 :)

【解决方案2】：

更简单的解决方案是在间隙周围的元素之一上设置自动边距。这将导致 flexbox 将所有可用空间安排到该间隙。

 <View style={{
    flexDirection: 'row',
    flex: 1,
    borderTopWidth: isIphoneX() ? 35 : 25,
    backgroundColor: color.PRIMARY_COLOR,
    padding: 20
}} >
    <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
        //some content
    </View>

    <View style={{ flexDirection: 'column', justifyContent: 'center', paddingLeft:8 }}>
        //some content
    </View>

    <View style={{marginLeft:'auto' }}>
        //some content
    </View>
</View>

这也适用于多个末端对齐的项目，并且没有任何绝对定位。

【讨论】：

【解决方案3】：

试试这个

<View style={{
    flexDirection: 'row',
    flex: 1,
    padding: 20
}} >
    <View style={{ flexDirection: 'row',flex:1 }}>
         <View>
           //some content
         </View>
         <View style={{marginLeft:10}}>
          //some content
         </View>
    </View>
    <View >
        //some content
    </View>
</View>

【讨论】：