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

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:

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:

Danke dir!

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>

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.

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

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.

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

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

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!

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.

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>

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

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

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

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