Reagisce al testo nativo che esce dallo schermo, rifiutandosi di andare a capo. Cosa fare?

Il codice seguente può essere trovato in questo esempio live

Ho il seguente elemento nativo di reazione:

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

con i seguenti stili:

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

Ciò si traduce nella seguente schermata:

Come posso impedire al testo di uscire dallo schermo e tenerlo confinato al centro dello schermo con una larghezza di cioè l'80% del genitore.

Non penso che dovrei usarlo widthperché lo eseguirò su MOLTI schermi mobili diversi e voglio che sia dinamico, quindi penso che dovrei fare affidamento totalmente su flexbox.

(Questo era il motivo iniziale per cui avevo flex: 0.8all'interno di descriptionContainerHor.

Quello che voglio ottenere è qualcosa del genere:

Grazie!

Ho trovato la soluzione dal link sottostante.

[Testo] Il testo non va a capo # 1438

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

Di seguito è riportato il collegamento utente del profilo Github se vuoi ringraziarlo.

Ally Rippley

Modifica: martedì 9 aprile 2019

Come @sudoPlz menzionato nei commenti, funziona con l' flexShrink: 1aggiornamento di questa risposta.

Questo è un bug noto . flexWrap: 'wrap'non ha funzionato per me, ma questa soluzione sembra funzionare per la maggior parte delle persone

Codice

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

stili

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

La soluzione a questo problema è flexShrink: 1.

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

A seconda del set up, si può anche essere necessario aggiungere flexShrink: 1al <View>'genitore s pure, per ottenere questo al lavoro, in modo da giocare con questo e ce la fai.

La soluzione è stata scoperta da Adam Pietrasiak in questo thread.

hai solo bisogno di avere un wrapper per il tuo <Text>con flex come sotto;

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

Funziona se rimuovi flexDirection: rowda descriptionContainerVere descriptionContainerVer2rispettivamente.

AGGIORNAMENTO (vedi commenti)

Ho apportato alcune modifiche per ottenere ciò che penso tu stia cercando. Prima di tutto ho rimosso il descriptionContainerHorcomponente. Quindi ho impostato la flexDirectiondelle viste verticali su rowe ho aggiunto alignItems: 'center'e justifyContent: 'center'. Poiché le viste verticali ora sono di fatto impilate lungo l'asse orizzontale, ho rimosso la Verparte dal nome.

Quindi ora hai una vista wrapper che dovrebbe allineare verticalmente e orizzontalmente il suo contenuto e impilarlo lungo l'asse x. Quindi metto semplicemente due Viewcomponenti invisibili sul lato sinistro e destro del Textcomponente per eseguire l'imbottitura.

Come questo:

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

E questo:

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

Allora ottieni quello che credo tu stia cercando.

ULTERIORI MIGLIORAMENTI

Ora, se desideri impilare più aree di testo nelle viste blu e arancione, puoi fare qualcosa del genere:

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

Dove textWrapè disegnato in questo modo:

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

Spero che questo ti aiuti!

Un'altra soluzione che ho trovato a questo problema è avvolgere il testo all'interno di una vista. Imposta anche lo stile della vista su flex: 1.

Volevo aggiungere che stavo avendo lo stesso problema e flexWrap, flex: 1 (nei componenti di testo), niente flex funzionava per me.

Alla fine, ho impostato la larghezza del wrapper dei miei componenti di testo sulla larghezza del dispositivo e il testo ha iniziato a venire a capo. 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>

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

{flex: aNumber} è tutto ciò di cui hai bisogno!

Basta impostare "flex" su un numero adatto a te. E poi il testo andrà a capo.

Nella versione 0.62.2 di React Native, ho appena messo "flex-shrink: 1" nel Container del mio "Text", ma ricorda la riga flex-direction: in View of container. Grazie ragazzi per l'aiuto.

Il mio codice:

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

la mia soluzione di seguito:

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

stile:

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

risultato: [

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