将项目与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

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

display:flex

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

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

这里https://stackblitz.com/edit/flex-m-right-auto的示例。

PS，如果您不想使用flex，也可以 <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 > 。