100% Breite in React Native Flexbox

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

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

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

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

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

Bitte schön:

Ändern Sie einfach den line1-Stil wie folgt:

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

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()]}>

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

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>

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'
},

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

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>