提问人:Parth 提问时间:6/23/2019 更新时间:7/3/2019 访问量:1584
React Native Text 不受容器视图限制的限制
React Native Text is not getting bounded by limits of container View
问:
我正在创建一个 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 | *--------------------------*
因此,文本似乎不会根据其父级的宽度来获取宽度。
这是它的样子:
视图层次结构如下:
<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代码,但我总结了上面的重要部分。
答:
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,那么它就会正确地占用空间。
评论
{ flexWrap: "wrap" }