Есть ли способ, которым я могу обернуть все содержимое компонента Text внутри родительского представления вact-native?

Question

Я создаю экран в реагирующем, где я должен отображать текст в родительском представлении.Как сделать так, чтобы весь текст отображался?

Сначала я подумал, что это проблема с переносом текста, поэтому я попробовал это решение из одного вопроса здесь

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