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

Question

我正在创建一个反应本机博览会应用程序。在其中，我想创建一个 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 代码，但我已经总结了上面的重要部分。

Answer 1

Flexwrap:wrapFlex:1 如果视图样式将弯曲方向设置为行，请将其设置为文本样式表。

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