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

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

提问人:Parth 提问时间:6/23/2019 更新时间:7/3/2019 访问量:1584

问:

我正在创建一个 react 原生博览会应用程序。在其中,我想创建一个 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     |
*--------------------------*

因此,文本似乎不会根据其父级的宽度来获取宽度。

这是它的样子:

Screen shot of how text is overflowing

视图层次结构如下:

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

TypeScript React-Native TextView 溢出 博览会

评论

0赞 Swapnil 6/23/2019
添加到包含文本的视图。{ flexWrap: "wrap" }

答:

0赞 Hamza Waleed 6/23/2019 #1

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

PS:我应该在评论中问这个问题,但这里有一个新的 StackOverFlow 用户。

评论

0赞 Parth 6/23/2019
哈哈,没关系!我厌倦了添加width=“100%”,但这没有帮助。现在我作弊并这样做了: “” width: Math.round(Dimensions.get('window').width) - 120 “”
8赞 Piyush Abhishek Singh 6/23/2019 #2

Flex wrap:包裹 弹性:1 如果视图样式的弯曲方向为行,则将其设置为文本样式表。

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

评论

0赞 Parth 7/2/2019
不!无济于事。
2赞 Parth 7/9/2019
今天又试了一次。只要带有 flexDirection: “row” 的父视图中只有一个子组件具有 flex: 1,那么它就会正确地占用空间。