React Native - flex 内的短文本：1 个视图答案

【问题标题】：React Native - Short text inside flex: 1 viewReact Native - flex 内的短文本：1 个视图
【发布时间】：2021-06-02 19:02:59
【问题描述】：

我在一行中有一个文本，它有 2 个 flex 视图：1

<View style={{ flexDirection: "row", padding: 5 }}>
   <View style={{ flex: 1 }}>
       <Text>Just a reallyyyyyyyy longgggg text</Text>
   </View>

   <View style={{ flex: 1, padding: 10 }}>
      <Button style={{width: 130, height: 30}} ... />
   </View>
</View>

使用此实现，第二个视图与第一个视图的文本重叠如果它太长。

如果组件的长文本被第二个视图重叠，我怎样才能使组件的长文本看起来像：“Hello w...”？

【问题讨论】：

..
@UğurEren 谢谢你让我开心！

标签： javascript css reactjs react-native

【解决方案1】：

只需阅读说明，我就可以使用 CSS 找到。

<View style={{ flexDirection: "row", flexWrap: "wrap", padding: 5 }}>
   <View style={{ flex: 1 }}>
       <Text>Just a reallyyyyyyyy longgggg text</Text>
   </View>

   <View style={{ flex: 1, padding: 10 }}>
      <Button style={{width: 130, height: 30}} ... />
   </View>
</View>

您应该将flexWrap: wrap 添加到 View 标记中。

【讨论】：