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

Следующий код можно найти в этот живой пример

У меня есть следующий отредактированный собственный элемент:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <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>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

со следующими стилями:

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

Это приведет к следующему экрану:

Как я могу остановить вывод текста из экрана и держать его в середине экрана с шириной, т.е. 80% от родительского.

Я не думаю, что я должен использовать width, потому что я буду запускать это на МНОГИХ различных мобильных экранах, и я хочу, чтобы он был динамичным, поэтому я думаю, что я должен полностью полагаться на flexbox.

(Это была первая причина, по которой у меня было flex: 0.8 внутри descriptionContainerHor.

Что я хочу достичь, это примерно так:

Спасибо!

Ответ 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'
},

результат: [