Question

我正在用本机创建一个屏幕，必须在父视图上显示文本。如何显示整个文本？

起初，我认为这是文本不自动换行的问题，因此我尝试了一个问题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>

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

Answer 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>

Answer 2

<View style={{flex: 1}}> // textContainer
   <Text> Your text goes here. </Text>
</View>

如果将文本放在父视图中，则始终会自动换行。您只需指定视图的宽度即可，方法是将其设置为屏幕的宽度，或者使用flex: 1（如果textContainer的父级的宽度等于屏幕的宽度）。要获取屏幕宽度并设置textContainer的宽度，请使用以下代码：

import { Dimensions } from 'react-native';
const width = Dimensions.get('screen').width;

...

<View style={{width}}> // textContainer
   <Text> Your text goes here. </Text>
</View>

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

2 个答案: