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


124

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

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

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

Я хочу добиться примерно этого:

Чего я хочу достичь

Спасибо!

Ответы:


212

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

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

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

Вывод

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

Элли Риппли


Изменить: вторник, 9 апреля 2019 г.

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

введите описание изображения здесь


1
Спасибо, это отличный ответ, но я пробовал его, и по какой-то причине он не всегда работает (не знаю почему: S). flexWrap немного нестабилен в react-native. +1 хотя за то, что поднял это.
SudoPlz

1
^^^ Это настоящий ответ здесь. Примите это задание!
Грег Бласс,

1
Просто обратите внимание на информационную часть этого ответа github.com/facebook/react-native/issues/…
SudoPlz

14
Я обнаружил, что в некоторых случаях flexShrink: 1применение к родительскому представлению тоже может помочь.
SudoPlz 08

Это работает. Спасибо.
Uddesh_jain

68

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

Код

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

Стили

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

1
мне потребовался день, чтобы найти ваш ответ ... Спасибо!
Кевин Амиранофф

65

Решение этой проблемы есть flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

В зависимости от вашей настройки вам также может потребоваться добавить flexShrink: 1к <View>родительскому элементу, чтобы это работало, так что поиграйте с этим, и у вас все получится.

Решение было обнаружено Адамом Пьетрасиаком в этой теме.


Родительский вид тоже был для меня решением! Если у родителя был flexDirection: 'column', текст не переносился.
crestinglight

1
Ты только что спас мне жизнь…
Никандр Мархал

Сработало отлично, спасибо!
fadzb

31

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

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

2
Это единственное правильное решение, которое на самом деле также работает
AlwaysConfused

2
Действительно, flex: 1это все, что вам нужно.
instanceof

10

Работает, если убрать 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
},

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


Хорошо, я немного изменил вопрос, чтобы отразить то, чего я действительно хочу достичь. Теперь об ответе: причина, по которой я использовал, flexDirection: rowзаключалась в том, что (если это у меня прямо в голове) flexDirectionдиктует направление, в котором будут складываться «потомки» этого родителя. Теперь я хотел, чтобы текст был средним дочерним элементом в родительском элементе, который складывает дочерние элементы в ряд и занимал 80% ширины родительского элемента (что-то вроде второй фотографии). Не могли бы вы немного обновить ответ, чтобы отразить это? Я готов принять это как ответ.
SudoPlz

Извините за поздний ответ, был занят. Но я обновил свой ответ, надеюсь, это то, что вам нужно.
Eysi

Этот ответ АБСОЛЮТНО потрясающий .. Именно то, что я искал, спасибо, Эллиот !!!!!
SudoPlz

flexDirection: "row"была суть моей проблемы, попробовал все остальное безуспешно. Измените значение flexDirectionна, columnи текст внутри него будет переноситься нормально.
восемьдесят пять,

9

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


2

Я хотел добавить, что у меня была такая же проблема и 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>

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

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

Просто установите для параметра «flex» значение, которое вам подходит. И тогда текст будет перенесен.


Как ни странно, это исправление сработало для меня.
Dror Bar

1

В версии 0.62.2 React Native я просто поместил «flex-shrink: 1» в контейнер моего «текста», но помню flex-direction: row в представлении контейнера. Спасибо, ребята, за помощь.

Мой код:

export const Product = styled.View`
  background: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  margin: 5px;
  flex-direction: row;
`;

export const ProductTitleContainer = styled.View`
  font-size: 16px;
  margin-left: 5px;
  flex-shrink: 1;
`;

export const ProductTitle = styled.Text`
  font-size: 16px;
  flex-wrap: wrap;
`;
`;

-1

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

<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'
},

результат: [г] мой результат [1]


Итак, вы используете статическую ширину для родительского элемента, чего мы и хотели здесь избежать.
SudoPlz

-1
<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>

Пожалуйста, опишите, какая часть вашего ответа решает проблемы OP и почему.
Себастьян Б.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.