Larghezza 100% in React Native Flexbox

Ho già letto diversi tutorial su flexbox, ma non riesco ancora a far funzionare questa semplice operazione.

Come posso rendere la scatola rossa al 100% di larghezza?

Codice:

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

stile:

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

Grazie!

Aggiornamento 1: Suggerimento di Nishanth Shankar, aggiunta di flex: 1 per il wrapper, flexDirection: 'row'

Produzione:

Codice:

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

Aggiungi semplicemente alignSelf: "stretch"al foglio di stile del tuo articolo.

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

È necessario utilizzare le dimensioni

Innanzitutto, definire le dimensioni.

import { Dimensions } from "react-native";

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

quindi, cambia line1stile come di seguito:

line1: {
    backgroundColor: '#FDD7E4',
    width: width,
},

Editted:

Al fine di flettere solo il testo centrale, è possibile adottare un approccio diverso: non riflettere le altre viste.

• Lascia che flexDirection rimanga nella 'colonna'
• rimuovere il alignItems : 'center'dal contenitore
• aggiungere alignSelf:'center'alle visualizzazioni di testo che non si desidera flettere

È possibile avvolgere il componente Testo in un componente Visualizza e dare alla vista una flessibilità di 1.

Il flex darà:

Larghezza 100% se flexDirection:'row'in in styles.container

Altezza al 100% se flexDirection:'column'in in styles.container

Ecco qui:

Basta cambiare lo stile line1 come di seguito:

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

Usa JavaScript per ottenere la larghezza e l'altezza e aggiungili nello stile di Visualizza. Per ottenere la larghezza e l'altezza complete, utilizzare Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html

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

e poi,

<View style={[styles.overlay, this.getSize()]}>

Per prima cosa aggiungi il componente Dimensione:

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

Secondo definire le variabili:

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

In terzo luogo metterlo nel tuo foglio di stile:

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

In realtà in questo esempio volevo creare una vista reattiva e volevo visualizzare solo 0,25 della vista dello schermo, quindi l'ho moltiplicato per 0,25, se volevi il 100% dello schermo non moltiplicarlo per nulla del genere:

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

Nota: prova a comprendere appieno il concetto di flessibilità.

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

basta rimuovere gli alignItems: 'center'stili contenitore e aggiungerli textAlign: "center"aline1 stile indicato di seguito.

Funzionerà bene

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

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

Style ={{width : "100%"}}

prova questo:

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%'e alignSelf: 'stretch'non ha funzionato per me. Dimensionsnon ha soddisfatto il mio compito perché avevo bisogno di operare in una vista profondamente annidata. Ecco cosa ha funzionato per me, se riscrivo il tuo codice. Ho appena aggiunto alcune altre se ho Viewusato le flexproprietà per ottenere il layout necessario:

  {/* 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>