Ich habe bereits mehrere Flexbox-Tutorials gelesen, kann diese einfache Aufgabe jedoch immer noch nicht ausführen.
Wie kann ich die rote Box auf 100% Breite bringen?
Code:
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
<Text style={styles.line1}>
line1
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
Stil:
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
flexDirection: 'column',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
borderWidth: 1,
},
line1: {
backgroundColor: '#FDD7E4',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
borderWidth: 1,
},
Danke dir!
Update 1: Vorschlag von Nishanth Shankar, Flex: 1 für den Wrapper, flexDirection: 'row'
Ausgabe:
Code:
<View style={styles.container}>
<View style={{flex:1}}>
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
</View>
<View style={{flex:1}}>
<Text style={styles.line1}>
line1
</Text>
</View>
<View style={{flex:1}}>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
</View>
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
flexDirection: 'row',
flexWrap: 'wrap',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
borderWidth: 1,
},
line1: {
backgroundColor: '#FDD7E4',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
borderWidth: 1,
},
flexbox
react-native
franfran
quelle
quelle
width: "100%"
sollte es auch funktionieren, aber es funktioniert nicht. Ich glaube , ich verstehe nicht , wannalignSelf: "stretch"
funktioniert vswidth: "100%"
. @Corentin irgendwelche Ideen? Vielen Dank!position: absolute, top: 0, bottom: 0, left: 0, right: 0
Sie sollten Dimensionen verwenden
Definieren Sie zunächst die Abmessungen.
Ändern Sie dann den
line1
Stil wie folgt:quelle
Dimensions.get('window').scale
- dies sollte in Ihrem Fall 2 zurückgeben.Bearbeitet:
Um nur den mittleren Text zu biegen, kann ein anderer Ansatz gewählt werden - Entflexen Sie die anderen Ansichten.
alignItems : 'center'
aus dem BehälteralignSelf:'center'
den Textviews , dass Sie nicht wollen , biegenSie können die Textkomponente in eine Ansichtskomponente einbinden und der Ansicht einen Flex von 1 geben.
Der Flex gibt:
100% Breite, wenn der
flexDirection:'row'
in styles.container100% Höhe, wenn der
flexDirection:'column'
in styles.containerquelle
Bitte schön:
Ändern Sie einfach den line1-Stil wie folgt:
quelle
Verwenden Sie Javascript, um die Breite und Höhe zu ermitteln und im Stil von View hinzuzufügen. Verwenden Sie https://facebook.github.io/react-native/docs/dimensions.html, um die volle Breite und Höhe zu erhalten
Dimensions.get('window').width
und dann,
quelle
Fügen Sie zuerst die Dimensionskomponente hinzu:
Zweitens definieren Variablen:
Drittens setzen Sie es in Ihr Stylesheet:
Eigentlich wollte ich in diesem Beispiel eine reaktionsschnelle Ansicht erstellen und nur 0,25 der Bildschirmansicht anzeigen, also habe ich sie mit 0,25 multipliziert. Wenn Sie 100% des Bildschirms möchten, multiplizieren Sie sie nicht mit so etwas:
quelle
quelle
Entfernen Sie einfach die
alignItems: 'center'
Stile in den Containern und ergänzen SietextAlign: "center"
sieline1
wie unten angegeben.Es wird gut funktionieren
quelle
Versuche dies:
quelle
width: '100%'
undalignSelf: 'stretch'
hat nicht für mich gearbeitet.Dimensions
entsprach nicht meiner Aufgabe, da ich eine tief verschachtelte Ansicht bearbeiten musste. Folgendes hat bei mir funktioniert, wenn ich Ihren Code neu schreibe. Ich habe gerade einige weitere hinzugefügtView
undflex
Eigenschaften verwendet, um das erforderliche Layout zu erzielen:quelle