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, width
weil 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.8
innerhalb der hatte descriptionContainerHor
.
Was ich erreichen möchte, ist ungefähr so:
Danke dir!
quelle
flexShrink: 1
Anwendung auf die übergeordnete Ansicht hilfreich ist.Dies ist ein bekannter Fehler .
flexWrap: 'wrap'
hat bei mir nicht funktioniert, aber diese Lösung scheint für die meisten Menschen zu funktionierenCode
Stile
quelle
Die Lösung für dieses Problem ist
flexShrink: 1
.Abhängig von Ihrer Einrichtung, müssen Sie möglicherweise auch auch hinzufügen ,
flexShrink: 1
um 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.
quelle
Sie brauchen nur eine Hülle für Ihre
<Text>
mit Flex wie unten;quelle
flex: 1
ist alles, was Sie brauchen.Es funktioniert , wenn Sie entfernen
flexDirection: row
ausdescriptionContainerVer
unddescriptionContainerVer2
sind.UPDATE (siehe Kommentare)
Ich habe ein paar Änderungen vorgenommen, um das zu erreichen, wonach Sie suchen. Zuerst habe ich die
descriptionContainerHor
Komponente entfernt. Dann habe ich dieflexDirection
von den vertikalen Ansichtenrow
und hinzugefügtalignItems: 'center'
undjustifyContent: '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
View
Komponenten auf der linken und rechten Seite derText
Komponente platziert, um die Polsterung durchzuführen.So was:
Und das:
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:
Wo
textWrap
ist so gestylt:Hoffe das hilft!
quelle
flexDirection: row
war, dass (wenn ich dieses Recht im Kopf habe)flexDirection
die 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.flexDirection: "row"
war der Kern meines Problems, versuchte alles andere ohne Glück. Ändern Sie IhrflexDirection
incolumn
und der Text darin wird normal umgebrochen.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.
quelle
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');
quelle
{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.
quelle
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:
quelle
meine Lösung unten:
Stil:
Ergebnis: [
quelle
quelle