Измените собственный текст, уходящий со своего экрана, отказываясь обернуть. Что делать?

Ответ 1

Я нашел решение по ссылке ниже.

[Текст] Текст не переносится # 1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

Ниже приведена ссылка на профиль пользователя Github, если вы хотите поблагодарить его.

Элли Риппли

Изменение: Вт апр 09 2019

Как упомянуто в комментариях @sudoPlz, он работает с flexShrink: 1 обновляя этот ответ.

Ответ 2

Это известная ошибка. flexWrap: 'wrap' у меня не сработала, но, похоже, это решение flexWrap: 'wrap' большинству людей

Код

<View style={styles.container}>
    <Text>Some text</Text>
</View>

Стили

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

Ответ 3

Он работает, если вы удалите flexDirection: row из descriptionContainerVer и descriptionContainerVer2 соответственно.

ОБНОВЛЕНИЕ (см. комментарии)

Я сделал несколько изменений, чтобы добиться того, что, как я думаю, вам нужно. Прежде всего, я удалил компонент descriptionContainerHor. Затем я установил flexDirection вертикальных представлений на row и добавил alignItems: 'center' и justifyContent: 'center'. Поскольку вертикальные представления теперь фактически уложены вдоль горизонтальной оси, я удалил часть Ver из имени.

Итак, теперь у вас есть представление оболочки, которое должно вертикально и горизонтально выравнивать его содержимое и складывать его вдоль оси x. Затем я просто добавляю две невидимые компоненты View в левой и правой части компонента Text для заполнения.

Вот так:

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

И это:

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

Затем вы получите то, что, как я полагаю, вам нужно.

ДАЛЬНЕЙШИЕ УЛУЧШЕНИЯ

Теперь, если вы хотите складывать несколько текстовых областей в синем и оранжевом виде, вы можете сделать что-то вроде этого:

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

Где textWrap имеет такой стиль:

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

Надеюсь, это поможет!

Ответ 4

вам просто нужно иметь обертку для вашего <Text> с помощью flex, как показано ниже;

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

Ответ 5

Еще одно решение, которое я нашел для этой проблемы, - это обернуть текст внутри представления. Также задайте стиль представления в flex: 1.

Ответ 6

В этом случае для поля "Текст" требуется width. Добавьте его как:

descriptionText: {
    width: 200, // any value
    // ... rest attributes 
}

Рабочий пример здесь: https://rnplay.org/apps/duVfpA

Ответ 7

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{flex: aNumber} - это все, что вам нужно!

Просто установите "flex" на номер, который подходит вам. И тогда текст будет завернут.

Ответ 8

Я хотел добавить, что у меня была та же проблема, и flexWrap, flex: 1 (в текстовых компонентах), у меня ничего не получалось.

В конце концов, я установил ширину оболочки текстовых компонентов на ширину устройства, и текст начал переносить. const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>

Ответ 9

Это работает для меня в большинстве случаев, даже с гибкими столбцами:

wordWrap: 'break-word'

Таким образом, текст будет по-прежнему переноситься даже с жестко заданной шириной для того же элемента/компонента.

width: 100

В твоем случае:

width: '80%'

В моем случае это было важно для хранения 3 столбцов и чтения текста.

Надеюсь это поможет!

Ответ 10

мое решение ниже:

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

стиль:

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

результат: [