Как расположить 2 текстовых компонента в конце представления в RN?

Question

Я хочу добиться этого результата

Но это текущее поведение

Как вы можете заметить, оба компонента Text не выровнены правильно.

Это код

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
</View>

Не могли бы вы, ребята, помочь мне с этим?

Answer 1

Я думаю, что это должно работать, если вы оберните оба текста в другой <Text> компонент следующим образом:

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
  <Text>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
  </Text>
</View>