有没有一种方法可以将 Text 组件的全部内容包装在 react-native 的父视图中?
Is there a way I can wrap the whole contents of a Text component inside parent view in react-native?
我正在用 react-native 创建一个屏幕,我必须在父视图上显示文本。如何让整个文本显示出来?
起初我以为是文本不换行的问题,所以我从一个问题中尝试了这个解决方案
<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>
我希望呈现所有文本,但只呈现第一行
文本呈现正确,但是当您放置 属性 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>
我正在用 react-native 创建一个屏幕,我必须在父视图上显示文本。如何让整个文本显示出来?
起初我以为是文本不换行的问题,所以我从一个问题中尝试了这个解决方案
<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>
我希望呈现所有文本,但只呈现第一行
文本呈现正确,但是当您放置 属性 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>