将项目对齐到View组件的右侧？

Question

如何将徽章对齐？

这是我目前拥有的代码：

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

Answer 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你也可以float:right，如果你不想使用flex。