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

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

'use strict';

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

var SampleApp = React.createClass({
  render: function() {
    return      (
  

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

        
          
            Some other long text which you can still do nothing about.. Off the screen we go then.
          
        



  );
  }
});
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'
  }
});

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

Text off screen app

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

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

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

Я хочу достичь примерно такого:

What I want to achieve

Спасибо!

SudoPlz

Ответы (21)

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

 
   
       Really really long text...
   

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

The solution was discovered by Adam Pietrasiak in this thread.

 
   

Это будет работать


    Вы пропустили fdddddd dddddddd
     Ты скучаешь по fdd
   

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

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

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

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

 
    You miss fdddddd dddddddd 
     You miss fdd
   

Output

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

Элли Риппли


Редактировать: Вт, 09 апреля 2019

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

enter image description here

Я пробовал многие из приведенных выше ответов, но ни один из них у меня не помог. Я добился наилучшего результата, поместив flexShrink на сам элемент Text и flexGrow на родительский View и Text. элемент.

I needed flexDirection: row on the parent because I want to have an icon on the right


    
        A long text that needs to wrap into multiple lines
    


Это выглядит так:

Screenshot of text wrapping into multipple lines

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


  
    
      This code will make your text centered even when there is a line-break
    
  

У меня была такая же проблема, и чтобы ее исправить, мне пришлось убедиться, что ВСЕ родители View имеют style = {{flex: 1}}

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


  Your Text

Пробовал все, ничего не работало, но это ->

wrapText:{
    width:"65%"
},
listItemLeft:{
    fontWeight:"bold",
    margin:3
},


    {item.left}

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


     
        // text here                            
     

стиль:

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

результат: [d]my result[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;
`;
`;

Используйте высоту: 'авто' в текстовом стиле.

enter image description here enter image description here

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

Код


    Some text

Стили

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

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

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

// This code is written in Typescript
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    paddingVertical: 8,
  },
})

export const WrapText: React.FC<{
  text: string
}> = ({ text }) => {
  return (
    
      {text.split(' ').map((word, index) => (
          
            {word}{' '}
          
        ))}
    
  )
}

const Example = 

P / S: Конечно, это работает только для алфавитных систем письма, другие системы письма, в которых не используются пробелы (например, китайские письма), не будут переноситься с использованием этого компонента.

К сожалению, у меня ничего из вышеперечисленного не помогло.

Я нашел этот пакет npm, который можно использовать напрямую: https://github.com/Bang9/react-native-wrapped-text

Или создайте что-то подобное:


  
    Long text, sooo looong...
  

На основе: https://github.com/Bang9/react-native-wrapped-text/blob/master/src/index.js

Думаю, можно сделать что-то подобное, для лучшего представления я приложил картинку с кодом:

enter image description here

Итак, мы можем сделать что-то вроде этого:

TermsOfService = {
  fontFamily: 'Verlag-Book';
  fontSize: 14px;
  textAlign: center;
},
HighlightedText = {
  font-family: 'Verlag-Book';
  font-size: 14px;
  text-align: center;
  color: ${COLORS.PRIMARY_ADMIRAL_BLUE};
},
Container: {
  width: 100%;
  alignSelf: center;
  alignItems: center;
  justifyContent: center;
  flexDirection: row;
  flexWrap: wrap;
}

И ваш Компонент просто использует его так:

 
   By joining, you agree to the some thing 
   this is highlighted 
   and 
   and this as well
 

I wanted to add that I was having the same issue and flexWrap, flex:1 (in the text components), nothing flex was working for me.

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


  {image.title}
  {image.description}

Это сработало для меня


  some long random text...

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

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

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

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

Вот так:


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

А это:

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

Тогда вы получите то, что, я думаю, вам было нужно.

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

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


  
  
    
      Some other long text which you can still do nothing about.. Off the screen we go then.
    
    
      Another column of text.
    
  
  

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

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

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

2022 WebDevInsider