在 React Native 中显示等效的内联块

Question

我需要实现这个目标：

https://jsfiddle.net/ghxfpL7j/1/

在 React Native 中但是：

• 文本中不能有视图
• 您无法为文本设置边距或填充

我尝试将“C”放在视图和文本中，然后将另一个视图放在带有数字的其他文本中，但我无法实现相同的效果，因为当名称太长时它不起作用。

这是我尝试过的：

<View style={a}>
  <View style={b}><Text style={c}>C</Text></View>
  <Text style={d}>Player name</Text>
  <View style={e}>20</View>
</View>

然后是样式：

a: {
  flexDirection: 'row',
  flexWrap: 'wrap'
}

b:{
  width: 20,
  backgroundColor: '#000'
}

c:{
  color: '#ddd
}

d:{
  flex: 1,
  text-align: 'right'
}

e:{
  text-align: 'right'
}

Answer 1

根据您的链接，可能是：

<View style={{ flexDirection: 'row' }}>
    <View style={{ flex: 1 }}>
        <Text>C</Text>
    </View>

    <Text>Player Name</Text>
    <Text>25</Text>
</View>