wake-up-neo.com

Reagiere nativen Text, der von meinem Bildschirm geht und weigert sich zu wickeln. Was ist zu tun?

Der folgende Code befindet sich in diesem Live-Beispiel

Ich habe das folgende native Element erhalten:

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

mit den folgenden Stilen:

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

Daraufhin wird folgender Bildschirm angezeigt: 

 Text off screen app

Wie kann ich verhindern, dass der Text vom Bildschirm verschwindet und in der Mitte des Bildschirms in einer Breite von 80% des übergeordneten Elements bleibt. 

Ich denke nicht, dass ich width verwenden sollte, da ich dies auf vielen verschiedenen mobilen Bildschirmen ausführen werde und ich möchte, dass es dynamisch ist. Ich denke, ich sollte mich auf flexbox verlassen. 

(Das war der erste Grund, warum ich flex: 0.8 in der descriptionContainerHor hatte.

Was ich erreichen möchte, ist ungefähr so:

 What I want to achieve

Vielen Dank!

44
SudoPlz

Ich habe die Lösung von unten gefunden.

[Text] Text kann nicht umbrochen werden # 1438

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

 Output

Unten ist der Link zum Github-Profil, wenn Sie sich bei ihm bedanken möchten.

Ally Rippley

68
Ashok R

Dies ist ein bekannter Fehler . flexWrap: 'wrap' hat für mich nicht funktioniert, aber diese Lösung scheint für die meisten Leute zu funktionieren

Code

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

Styles

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

Es funktioniert, wenn Sie flexDirection: row von descriptionContainerVer bzw. descriptionContainerVer2 entfernen.

UPDATE (siehe Kommentare)

Ich habe ein paar Änderungen vorgenommen, um das zu erreichen, von dem ich denke, dass Sie danach streben. Zuerst habe ich die descriptionContainerHor-Komponente entfernt. Dann habe ich die flexDirection der vertikalen Ansichten auf row gesetzt und alignItems: 'center' und justifyContent: 'center' hinzugefügt. Da die vertikalen Ansichten nun tatsächlich entlang der horizontalen Achse gestapelt sind, habe ich den Ver-Teil aus dem Namen entfernt.

Jetzt haben Sie eine Wrapper-Ansicht, die den Inhalt vertikal und horizontal ausrichten und entlang der x-Achse stapeln soll. Dann füge ich einfach zwei unsichtbare View-Komponenten auf der linken und rechten Seite der Text-Komponente ein, um die Auffüllung durchzuführen.

So was: 

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

Und das:

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

Dann bekommst du, was ich glaube, dass du danach warst.

WEITERE VERBESSERUNGEN

Wenn Sie nun mehrere Textbereiche innerhalb der blauen und orangefarbenen Ansicht stapeln möchten, können Sie Folgendes tun:

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

Wo textWrap so aussieht:

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

Hoffe das hilft!

8
Eysi

sie benötigen lediglich einen Wrapper für Ihren <Text> mit flex wie unten beschrieben.

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

Eine andere Lösung, die ich für dieses Problem gefunden habe, ist das Einbetten des Textes in eine Ansicht. Stellen Sie auch den Stil der Ansicht auf Flex ein: 1.

3
Joel

Die Lösung für dieses Problem ist flexShrink: 1.

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

Abhängig von Ihrer Einrichtung müssen Sie möglicherweise auch flexShrink: 1 zum übergeordneten Element von <View> hinzufügen, damit dies funktioniert. Spielen Sie also damit, und Sie werden es schaffen.

Die Lösung wurde von Adam Pietrasiak in diesem Thread. entdeckt

2
SudoPlz

Dies hat in den meisten Fällen auch bei flexiblen Säulen funktioniert:

wordWrap: 'break-Word'

Auf diese Weise wird der Text auch mit einer fest codierten Breite auf dasselbe Element/dieselbe Komponente umgebrochen.

width: 100

In Ihrem Fall:

width: '80%'

In meinem Fall war dies entscheidend, um 3 Spalten beizubehalten und trotzdem Text zu lesen.

Hoffe das hilft!

0
jasonleonhard

Ich wollte hinzufügen, dass ich das gleiche Problem hatte und FlexWrap, Flex: 1 (in den Textkomponenten), nichts Flex funktionierte für mich.

Schließlich stellte ich die Breite des Wrappers meiner Textkomponenten auf die Breite des Geräts ein, und der Text wurde umbrochen. 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>
0
mcc