100% Breite in React Native Flexbox

203

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?

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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,
  },
franfran
quelle

Antworten:

414

Fügen Sie einfach alignSelf: "stretch"zum Stylesheet Ihres Artikels hinzu.

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},
Corentin S.
quelle
9
Die Verbindung ist unterbrochen.
Lukas Knuth
2
Bei Verwendung von alignSelf Stretch hatte ich ein Problem mit Android - ich hatte ein Bild mit "absoluter" Position, und in diesem Fall wird ein solches Feld selbst bei Verwendung von "Stretch" an den Rand der darin enthaltenen Elemente aufgefüllt. Dimensions.get ('window'). Width funktionierte in meinem Fall sowohl unter iOS als auch unter Android.
st_bk
Diese eine Möglichkeit löste alle meine Probleme in voller Breite. Schauen
webdevinci
1
Es scheint, als width: "100%"sollte es auch funktionieren, aber es funktioniert nicht. Ich glaube , ich verstehe nicht , wann alignSelf: "stretch"funktioniert vs width: "100%". @Corentin irgendwelche Ideen? Vielen Dank!
Joel
4
@st_bk war dort ein Lebensretter! Ich habe jedoch eine bessere Lösung für den Fall gefunden, dass Sie sich absolut positionieren und dehnen müssen:position: absolute, top: 0, bottom: 0, left: 0, right: 0
lance.dolan
119

Sie sollten Dimensionen verwenden

Definieren Sie zunächst die Abmessungen.

import { Dimensions } from "react-native";

var width = Dimensions.get('window').width; //full width
var height = Dimensions.get('window').height; //full height

Ändern Sie dann den line1Stil wie folgt:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},
Melih Mucuk
quelle
3
Danke Melih Mucuk! alignSelf: "Stretch", vorgeschlagen von Corentin S., ist am einfachsten und einfachsten, daher habe ich diese Antwort akzeptiert. Wenn ich jedoch Dimensionen habe, kann ich das Layout auf neue Weise umspielen. In einigen Fällen konnten wir die Elemente programmgesteuert anpassen, danke!
Franfran
1
@ Melih Ich finde, dass die zurückgegebene Breite auf meinem Android-Gerät falsch ist. Die richtige Breite sollte 720px betragen, aber 360px wird zurückgegeben.
Friedensleidenschaft
4
@peacepassion, du hast 360, weil dein Gerät dpi 2x skaliert ist. Versuchen Sie Dimensions.get('window').scale- dies sollte in Ihrem Fall 2 zurückgeben.
Matusalem
Vielen Dank für Ihre Antwort, ich habe es mit einem Container mit Hintergrund zu tun und Ihr Vorschlag passt perfekt.
Clarenswd
6
Dies funktioniert nicht, wenn das Gerät gedreht wird. Es ist besser, ein adaptives Layout zu verwenden.
Laynemoseley
26

Bearbeitet:

Um nur den mittleren Text zu biegen, kann ein anderer Ansatz gewählt werden - Entflexen Sie die anderen Ansichten.

  • Lassen Sie flexDirection in 'column' bleiben
  • Nehmen Sie das alignItems : 'center'aus dem Behälter
  • fügen Sie alignSelf:'center'den Textviews , dass Sie nicht wollen , biegen

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

100% Höhe, wenn der flexDirection:'column'in styles.container

Nishanth Shankar
quelle
Ja, ich habe versucht, flexDirection: 'row' und flex: 1 so einzustellen, dass die Breite 100% beträgt. Die Komponenten sind jedoch alle inline und können nicht zur nächsten Zeile wechseln. Sogar ich habe flexWrap verwendet: 'wrap'
franfran
Hast du Glück mit der neuen Methode franfran?
Nishanth Shankar
Das von Corentin S. vorgeschlagene AlignSelf: 'Stretch' funktioniert.
Franfran
8

Bitte schön:

Ändern Sie einfach den line1-Stil wie folgt:

line1: {
    backgroundColor: '#FDD7E4',
    width:'100%',
    alignSelf:'center'
}
iDevAmit
quelle
6

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 erhaltenDimensions.get('window').width

getSize() {
    return {
        width: Dimensions.get('window').width, 
        height: Dimensions.get('window').height
    }
}

und dann,

<View style={[styles.overlay, this.getSize()]}>
Sean Chen
quelle
Oh, das gefällt mir. Möglicherweise nicht die beste Lösung, aber sie hat mein Problem gelöst. Ganz zu schweigen davon, dass es im Allgemeinen eine ziemlich nette Funktion ist.
Kevin Østerkilde
5

Fügen Sie zuerst die Dimensionskomponente hinzu:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

Zweitens definieren Variablen:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

Drittens setzen Sie es in Ihr Stylesheet:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

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:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}
Aboalela Mohammed
quelle
2

Beachten Sie: Versuchen Sie, das Flex-Konzept vollständig zu verstehen.

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>
Daniel Agus Sidabutar
quelle
1

Entfernen Sie einfach die alignItems: 'center'Stile in den Containern und ergänzen Sie textAlign: "center"sie line1wie unten angegeben.

Es wird gut funktionieren

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},
Ravi
quelle
1
Style ={{width : "100%"}}

Versuche dies:

StyleSheet generated: {
  "width": "80%",
  "textAlign": "center",
  "marginTop": 21.8625,
  "fontWeight": "bold",
  "fontSize": 16,
  "color": "rgb(24, 24, 24)",
  "fontFamily": "Trajan Pro",
  "textShadowColor": "rgba(255, 255, 255, 0.2)",
  "textShadowOffset": {
    "width": 0,
    "height": 0.5
  }
}
Chaurasia
quelle
Bitte geben Sie eine richtige Antwort auf die Frage. Geben Sie keinen Link an, ohne hier zuerst zu erklären, worum es geht.
Akaisteph7
-1

width: '100%'und alignSelf: 'stretch'hat nicht für mich gearbeitet. Dimensionsentsprach 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ügt Viewund flexEigenschaften verwendet, um das erforderliche Layout zu erzielen:

  {/* a column */}
  <View style={styles.container}>
    {/* some rows here */}
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    {/* this row should take all available width */}
    <View style={{ flexDirection: 'row' }}>
      {/* flex 1 makes the view take all available width */}
      <View style={{ flex: 1 }}>
        <Text style={styles.line1}>
          line1
        </Text>
      </View>
      {/* I also had a button here, to the right of the text */}
    </View>
    {/* the rest of the rows */}
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>
Саша Давиденко
quelle