Larghezza 100% in React Native Flexbox

Question

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

Come posso rendere il riquadro rosso al 100% della 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!

Update 1: suggerimento di Nishanth Shankar, aggiungendo flex: 1 per il wrapper, flexDirection: 'riga'

uscita:

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

Answer 1

Basta aggiungere alignSelf: "stretch" al foglio di stile del tuo articolo.

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

Answer 2

Editato:

Per flettere solo il testo centrale, è possibile adottare un approccio diverso: Unflex le altre viste.

• Let flexDirection rimangono a 'colonna'
• rimuovere il alignItems : 'center' dal contenitore
• aggiungere alignSelf:'center' alle textviews che non si desidera di flettere

Puoi avvolgere il componente di testo in un componente Visualizza e assegna a Visualizza un flex di 1.

Il flex darà:

larghezza

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

altezza

100% se il flexDirection:'column' in styles.container

Answer 3

Si dovrebbe usare Dimensions

In primo luogo, definire le dimensioni.

var { 
    AppRegistry, 
    ... 
    Dimensions 
} = React; 

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

quindi, il cambiamento line1 stile come di seguito:

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

Answer 4

utilizzare JavaScript per ottenere la larghezza e l'altezza e aggiungerli nello stile di vista. Per ottenere larghezza e l'altezza, 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()]}> 

Answer 5

aggiungere prima componente Dimensione:

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

Seconda definire le variabili:

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

Terzo metterlo nel 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 fare vista reattivo e voleva vedere solo 0,25 della visualizzazione dello schermo in modo da ho moltiplicato con 0,25, se si voleva il 100% del lo schermo non lo moltiplica con una cosa del genere:

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