React Native Text 不受容器视图限制答案

【问题标题】：React Native Text is not getting bounded by limits of container ViewReact Native Text 不受容器视图限制
【发布时间】：2019-11-05 09:04:04
【问题描述】：

我正在创建一个 react native expo 应用程序。在其中，我想创建一个 2 列布局。左边是内容的标题，右边是数据。

<View>
  <Text>Some title</Text>
  <Text>Some pretty long content</Text>
<View>

所以它应该显示为：

*--------------------------------------* |一些标题一些漂亮| |长内容| *--------------------------------------*

但现在发生的是：

*--------------------------------------* |有些标题有些很长 |内容 | *--------------------------------------*

所以文本似乎没有根据其父级的宽度来获取宽度。

看起来是这样的：

视图层次结构是这样的：

<View> -- 100% width 

  <View> -- Margin of 10 & padding of 5 & curved border

    <View> -- Flex row & a 1px border to show its expected width

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

       .
       .
       .

       <Text>Title</Text>
       <Text>Content</Text> -- Overflowing text 

    </View>

  </View>

</View>

如果你愿意，我可以添加 CSS 和 TSX 代码，但我已经总结了上面的重要部分。

【问题讨论】：

将{ flexWrap: "wrap" } 添加到包含文本的视图。

标签： typescript react-native textview overflow expo

【解决方案1】：

弹性换行：换行弹性：1 如果 View 样式将 flex 方向作为行，请将其设置为您的文本样式表。

或者尝试将父视图和文本的宽度设为 100%。

【讨论】：

不！没有帮助。
今天又试了一次。只要具有 flexDirection: "row" 的父视图中只有一个子组件具有 flex: 1，那么它就正确地占用了空间。

【解决方案2】：

请尝试将width="100%" 添加到您的Text 组件中。

P.S：我应该在评论中问这个问题，但这里是一个新的 StackOverFlow 用户。

【讨论】：

哈哈没关系！我厌倦了添加 width="100%"，但这并没有帮助。现在我作弊并这样做了：“” width: Math.round(Dimensions.get('window').width) - 120 ""