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

【问题标题】：react-native flexbox space-between with two nested viewsreact-native flexbox space-between 与两个嵌套视图
【发布时间】：2017-01-19 06:49:46
【问题描述】：

用下面的代码

<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 图标之间创建空格时将所有文本保留在一行上？

【问题讨论】：

标签： css reactjs react-native flexbox

【解决方案1】：

您是否应该更改默认显示设置。显示：弹性；为了使用 flex 属性？

【讨论】：

RN 默认为 flex