将项目与视图组件的右侧对齐？答案

【问题标题】：align an item to the right side of the View component?将项目与视图组件的右侧对齐？
【发布时间】：2018-09-02 01:34:38
【问题描述】：

如何将徽章右对齐？

这是我目前拥有的代码：

<View style={{flexDirection: 'row', flex: 1}}>
  <Text style={{width: "20%"}}>Room:</Text>
  <Text>{this.props.title}</Text>
  <Badge value='(1/7)' style={{alignSelf: 'flex-end'}} />
</View>

【问题讨论】：

你试过justifyContent: 'flex-end'
margin-left:auto?即<Badge value='(1/7)' style={{margin-left: 'auto'}} />
margin-left: auto 给出语法错误，而 justifyContent 用于父容器，因此这将证明两个文本元素以及徽章
可能很抱歉<Badge value='(1/7)' style={{marginLeft: 'auto'}} />。 React camelCases kebab-case :)

标签： javascript react-native mobile

【解决方案1】：

在示例中，您提供的 View 不是 display:flex。如果您更改它并将marginLeft auto 添加到您的孩子，它将向右对齐。

<View style={{flexDirection: 'row', flex: 1, display: 'flex'}}>
    <Text style={{border: '1px solid green', width: "20%"}}>Room:</Text >
    <Text >{this.props.title}</Text >
    <Badge value='(1/7)' style={{border: '1px solid red', marginLeft: 'auto', width: '40px'}} />
</View>

或者你可以强制你的中间节点填充两个项目之间的整个空间。

  <View style={{border: '1px solid yellow', flexDirection: 'row', flex: 1, display: 'flex', width: '100%'}}>
    <Text style={{border: '1px solid green', width: "20%"}}>Room:</Text >
    <Text style={{flex: 1}}>{this.props.title}</Text >
    <Badge value='(1/7)' style={{border: '1px solid red', width: '40px'}} />
  </View >

此处为您的示例https://stackblitz.com/edit/flex-m-right-auto。

PS 如果你不想使用 flex，你也可以float:right。

【讨论】：

@haosmark 我已经更新了一个额外的例子。如果这不起作用，请确保父 View 实际上与您假设的一样宽。如果它没有填满屏幕，则项目是否右对齐都没有关系，它永远不会出现在屏幕的骑行侧:)