有没有办法可以将 Text 组件的全部内容包装在 react-native 中的父视图中？

Posted 2023-02-22

【中文标题】有没有办法可以将 Text 组件的全部内容包装在 react-native 中的父视图中？

【英文标题】：Is there a way I can wrap the whole contents of a Text component inside parent view in react-native?

【发布时间】：2019-09-24 20:05:09

【问题描述】：

我正在 react-native 中创建一个屏幕，我必须在父视图上显示文本。如何让整个文本显示出来？

一开始我以为是文本不换行的问题，所以我从一个问题here尝试了这个解决方案

<View style=flexDirection:'row'> 
   <Text style=flex: 1, flexWrap: 'wrap'> You miss fdddddd dddddddd 
     You miss fdd
     Another line
     and another one
   </Text>
</View>

然后我尝试了numberOfLines=1

这是我的代码

<View style= width: '100%', height: '15%', position: 'absolute', alignSelf: 'center', backgroundColor: 'rgba(255, 255, 255, 0.4)', borderRadius: 5, marginTop: '90%', >
    <Text style= width: '80%', backgroundColor: 'transparent', alignSelf: 'center', textAlign: 'center', fontSize: 18, color: '#005F6A', marginTop: '5%' >
        `Text the first &
        Text the second &
        text the third`
     </Text>
</View>

我希望渲染所有文本，但只渲染第一行

【参考方案1】：

文本正在正确呈现，但由于您放置了属性width=80%，它必然会将内容包装到新行。我已将红色用于父视图以提高文本清晰度。请尝试运行以下代码，如果您遇到任何问题，请告诉我。我会尽力帮助你的伴侣。

<View style= backgroundColor: 'red', borderRadius: 5 >
            <Text style=  backgroundColor: 'transparent',
                            textAlign: 'center',
                            fontSize: 18,
                            color: '#005F6A',
                            marginTop: '5%'
                        >
                        Text the first & Text the second & text the third, Text the fourth & text the fifth
                    </Text>
                </View>

【讨论】：

它工作得很好，但是当我添加 marginTop: '90%' 时，文本完全消失，但父视图仍然存在

它不应该消失，我也将marginTop 增加到 90% 并且文本仍然存在。尽管它增加了父视图的大小，但这应该没问题，因为 Text 需要一些空间来扩大其空间。

是的，你说得对，我也输入了flexDirection: 'row'，一切都很好，谢谢