Reagieren Sie auf nativen Text, der von meinem Bildschirm verschwindet, und weigern Sie sich, ihn zu umbrechen. Was ist zu tun?

121

Der folgende Code befindet sich in diesem Live-Beispiel

Ich habe das folgende native Element reagieren:

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

Dies führt zu folgendem Bildschirm:

Text außerhalb des Bildschirms App

Wie kann ich verhindern, dass der Text vom Bildschirm verschwindet, und ihn in der Mitte des Bildschirms mit einer Breite von dh 80% des übergeordneten Bildschirms beschränken?

Ich denke nicht, dass ich es verwenden sollte, widthweil ich dies auf VIELEN verschiedenen mobilen Bildschirmen ausführen werde und ich möchte, dass es dynamisch ist, also denke ich, dass ich mich voll und ganz darauf verlassen sollte flexbox.

(Das war der ursprüngliche Grund, warum ich flex: 0.8innerhalb der hatte descriptionContainerHor.

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

Was ich erreichen will

Danke dir!

SudoPlz
quelle

Antworten:

203

Ich habe eine Lösung unter dem folgenden Link gefunden.

[Text] Text umschließt # 1438 nicht

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

Ausgabe

Unten finden Sie den Benutzerlink für das Github-Profil, wenn Sie ihm danken möchten.

Verbündeter Rippley


Edit: Di Apr 09 2019

Wie @sudoPlz in den Kommentaren erwähnt hat, funktioniert es mit der flexShrink: 1Aktualisierung dieser Antwort.

Geben Sie hier die Bildbeschreibung ein

Ashok R.
quelle
1
Danke, das ist eine großartige Antwort, aber ich habe es versucht und aus irgendeinem Grund funktioniert es nicht immer (keine Ahnung warum: S). flexWrap ist in reaktionsnativen etwas schuppig. +1, obwohl ich das angesprochen habe.
SudoPlz
1
^^^ Dies ist die eigentliche Antwort hier. Akzeptiere diese Op!
Greg Blass
1
Beachten Sie einfach den Info-Teil dieser Antwort github.com/facebook/react-native/issues/…
SudoPlz
11
Ich habe festgestellt, dass in einigen Fällen auch die flexShrink: 1Anwendung auf die übergeordnete Ansicht hilfreich ist.
SudoPlz
Das funktioniert. Vielen Dank.
Uddesh_jain
67

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

Code

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

Stile

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});
Dev01
quelle
1
Ich habe nur den Tag gebraucht, um deine Antwort zu finden ... Danke!
Kevin Amiranoff
62

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 auch hinzufügen , flexShrink: 1um die<View> übergeordnete Element des Elternteils , damit dies funktioniert. Spielen Sie also damit und Sie werden es schaffen.

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

SudoPlz
quelle
Elternansicht war auch die Lösung für mich! Wenn das übergeordnete Element flexDirection: 'column' hatte, konnte der Text nicht umbrochen werden.
Crestinglight
1
Du hast mir gerade das Leben gerettet…
Nikandr Marhal
Hat perfekt funktioniert, danke!
Fadzb
31

Sie brauchen nur eine Hülle für Ihre <Text>mit Flex wie unten;

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>
jsina
quelle
2
Das ist die einzig richtige Lösung, die tatsächlich auch funktioniert
AlwaysConfused
2
In der Tat flex: 1ist alles, was Sie brauchen.
Instanz vom
9

Es funktioniert , wenn Sie entfernen flexDirection: rowaus descriptionContainerVerund descriptionContainerVer2sind.

UPDATE (siehe Kommentare)

Ich habe ein paar Änderungen vorgenommen, um das zu erreichen, wonach Sie suchen. Zuerst habe ich die descriptionContainerHorKomponente entfernt. Dann habe ich die flexDirectionvon den vertikalen Ansichten rowund hinzugefügt alignItems: 'center'und justifyContent: 'center'. Da die vertikalen Ansichten nun tatsächlich entlang der horizontalen Achse gestapelt sind, habe ich die entferntVer Teil aus dem Namen entfernt.

Jetzt haben Sie eine Wrapper-Ansicht, die den Inhalt vertikal und horizontal ausrichten und entlang der x-Achse stapeln sollte. Ich habe dann einfach zwei unsichtbare ViewKomponenten auf der linken und rechten Seite der TextKomponente platziert, um die Polsterung 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 bekommen Sie, was ich glaube, dass Sie danach waren.

WEITERE VERBESSERUNGEN

Wenn Sie nun mehrere Textbereiche in 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 textWrapist so gestylt:

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

Hoffe das hilft!

Eysi
quelle
Ok, ich habe die Frage ein wenig geändert, um zu reflektieren, was ich wirklich erreichen möchte. Nun zur Antwort: Der Grund, den ich verwendet habe, flexDirection: rowwar, dass (wenn ich dieses Recht im Kopf habe) flexDirectiondie Richtung vorgegeben wird, in die die 'Kinder' dieses Elternteils gestapelt werden. Jetzt wollte ich, dass der Text das mittlere Kind eines Elternteils ist, das Kinder hintereinander stapelt und 80% der Breite der Eltern einnimmt (so etwas wie das zweite Foto). Könnten Sie bitte die Antwort ein wenig aktualisieren, um dies widerzuspiegeln? Ich bin bereit, dies als Antwort zu akzeptieren.
SudoPlz
Entschuldigung für die späte Antwort, war beschäftigt. Aber ich habe meine Antwort aktualisiert, hoffe, das ist, was Sie brauchten.
Eysi
Diese Antwort ist ABSOLUT erstaunlich. Genau das, wonach ich gesucht habe, danke Elliot !!!!!
SudoPlz
flexDirection: "row"war der Kern meines Problems, versuchte alles andere ohne Glück. Ändern Sie Ihr flexDirectionin columnund der Text darin wird normal umgebrochen.
fünfundachtzig
8

Eine andere Lösung, die ich für dieses Problem gefunden habe, besteht darin, den Text in eine Ansicht einzubinden. Stellen Sie außerdem den Stil der Ansicht auf Flex ein: 1.

Joel
quelle
2

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 habe ich die Breite des Wrappers meiner Textkomponenten auf die Breite des Geräts eingestellt 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>
mcc
quelle
1
<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{flex: aNumber} ist alles was Sie brauchen!

Stellen Sie 'flex' einfach auf eine Zahl ein, die zu Ihnen passt. Und dann wird der Text umbrochen.

Letanthang
quelle
Seltsamerweise war dies tatsächlich die Lösung, die für mich funktioniert hat.
Dror Bar
1

In Version 0.62.2 von React Native habe ich nur "flex-shrink: 1" in den Container meines "Textes" eingefügt, aber die Zeile "flex-direction:" in der Ansicht des Containers. Vielen Dank für die Hilfe.

Mein Code:

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;
`;
`;
Marcelo Tchelão
quelle
-1

meine Lösung unten:

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

Stil:

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

Ergebnis: [d] mein Ergebnis [1]

Nguyễn Phúc
quelle
Sie verwenden also eine statische Breite für das übergeordnete Element. Genau das wollten wir hier vermeiden.
SudoPlz
-2
<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>
Saurav
quelle
Bitte beschreiben Sie, welcher Teil Ihrer Antwort die Probleme der OP löst und warum.
Sebastian B.