выровнять элемент по правой стороне компонента 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.