react-native flexbox space-between与两个嵌套视图

Question

使用以下代码

<View style={{flexDirection: "row", justifyContent: "space-between"}}>
  <View>
    <Text style={{fontSize: 50}}>{hours}</Text>
    <Text style={{alignSelf: "flex-end"}}>h</Text>
    <Text style={{fontSize: 50}}>{minutes}</Text>
    <Text style={{alignSelf: "flex-end"}}>m</Text>
    <Text style={{fontSize: 50}}>{seconds}</Text>
    <Text style={{alignSelf: "flex-end"}}>s</Text>
  </View>
  <View style={{alignSelf: "center"}}>
    <Icon name="cancel" />
  </View>
</View>

我得到了这个渲染

我的期望是第一个内部视图将被视为放在屏幕左侧的单个块和右侧的第二个内部视图。这不是包装问题，如果我降低字体大小也会发生同样的事情。看起来好像内部视图变成了一个列。我错过了与web flexbox的细微差别吗？具体来说：如何在x图标之间创建空格的同时将所有文本保留在一行？

Answer 1

无法更改默认显示设置。显示：弯曲;为了使用flex属性？