typescript - React Native Text 不受容器 View 的限制

Question

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

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

所以它应该显示为:

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

But right now what happens is:

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

So text doesn't seem to take the width according to its parent's width.

This is how it looks:

The view hierarchy is this:

<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

软包:包裹弹性:1如果 View 样式将 flex 方向设置为行，请将此设置为您的文本样式表。

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