仅在有足够空间时才显示 react-native 组件（使用 rn flexbox）答案

【问题标题】：Only show react-native component if there's enough space (using rn flexbox)仅在有足够空间时才显示 react-native 组件（使用 rn flexbox）
【发布时间】：2017-06-27 22:36:28
【问题描述】：

我想知道如何使用 react-native 中提供的 flexbox 属性仅在有足够空间时显示组件。

<View style={{ flexDirection: 'row' }}>
    <Text>
        Text with unknown length
    </Text>
    <Text>
        Some more text with unknown length
    </Text>
    <Text>
        this should be hidden if the above text is too long
    </Text>
<View>

我不知道前 2 个文本组件的宽度，那么如何确保最后一个文本组件仅在屏幕上有足够空间时显示？

谢谢

p.s：不要急于将我的问题标记为重复，正如我所问的关于 react-native 而不是一般的 flexbox。 auto 值不是 react-native flexbox 支持。

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

你的意思是我根本不应该出现？还是只是其中的一部分？我假设是第一个。

一种可能的“解决方法”是设置固定高度并将内容包裹在里面（溢出隐藏）。

<View style={{ flexDirection: 'row', flexWrap: 'wrap', height: 15, backgroundColor: 'yellow', overflow:'hidden' }}>
    <Text>
        Text with unknown length
    </Text>
    <Text>
        Some more text with!
    </Text>
    <Text>
        this should be hidden if the above text is too long
    </Text>
</View>

查看https://snack.expo.io/ryAmTJgVZ上的工作示例

【讨论】：

这就是我要找的东西，谢谢我不知道overflow:'hidden' 与flexWrap 一起使用