React Native Text 不受容器视图的限制

Question

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

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

因此它应该显示为：

*--------------------------*
| Some Title   Some pretty |
|              long content|
*--------------------------*

但是现在发生的事情是：

*--------------------------*
| Some Title   Some pretty long
|              content     |
*--------------------------*

所以文本似乎没有根据其 parent 的宽度取宽度。

这是它的样子：

视图层次结构是这样的：

<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 代码，但我已经总结了上面的重要部分。

Answer 1

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

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

Answer 2

弹性包裹：包裹 Flex:1 如果 View 样式的 flex direction as row，请将此设置为您的文本样式表。

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

React Native Text 不受容器视图的限制

React Native Text is not getting bounded by limits of container View

overflow

textview

typescript

react-native

expo