Pulsante larghezza intera w/flex-box in nativa reattiva

Question

Sono nuovo in flexbox e non riesco a produrre un pulsante a larghezza intera in nativo reattivo. Ho cercato di capirlo da solo per più di un giorno e ho letto ogni articolo/post relativo su Internet senza alcun risultato.

Mi piacerebbe avere due elementi TextInput che coprono l'intera larghezza dello schermo, con un pulsante sotto di loro che copre anche l'intera larghezza dello schermo. Gli elementi TextInputsono che si estendono per tutta la larghezza dello schermo, ma questo sembra essere di default nel simulatore Android che sto utilizzando.

Ecco il mio codice:

var MyModule = React.createClass({ 
    render: function() { 
    return <View style={styles.container}> 

     <View style={styles.headline}> 
     <Text>Hello World</Text> 
     </View> 

     <View style={styles.inputsContainer}> 

     <TextInput style={[styles.input]} placeholder="Email" /> 
     <TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" /> 
     <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}> 
      <Text>Submit</Text> 
     </TouchableHighlight> 

     </View> 
    </View> 
    }, 
    buttonPressed: function() { 
    console.log('button was pressed!'); 
    } 
}); 

var paddingLeft = 15; 


var styles = StyleSheet.create({ 
    inputsContainer: { 
    // Intentionally blank because I've tried everything & I'm clueless 
    }, 
    fullWidthButton: { 
    // Intentionally blank because I've tried everything & I'm clueless 
    }, 
    input: { 
    paddingLeft: paddingLeft, 
    height: 40, 
    borderColor: 'black', 
    backgroundColor: 'white', 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: '#f0f0f0', 
    alignItems: 'stretch', 
    }, 
    headline: { 
    } 
}); 

module.exports = Onboarding; 

Qualcuno sa cosa devo fare per ottenere il TouchableHighlight a coprire l'intera larghezza dello schermo?

Answer 1

È possibile raggiungere questo impostando un flex: 1 proprietà sull'elemento genitore del TouchableHighlight, poi l'assegnazione di un flexDirection: immobile fila all'elemento TouchableHighlight:

<View style={styles.inputsContainer}> 
    <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}> 
     <Text style={styles.fullWidthButtonText}>Submit</Text> 
    </TouchableHighlight> 
</View> 

    inputsContainer: { 
    flex: 1 
    }, 
    fullWidthButton: { 
    backgroundColor: 'blue', 
    height:70, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center' 
    }, 
    fullWidthButtonText: { 
    fontSize:24, 
    color: 'white' 
    } 

ho creato un gruppo di lavoro completo esempio here. Inoltre, il codice completo è sotto.

https://rnplay.org/apps/J6fnqg

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    TextInput, 
} = React; 

var MyModule = React.createClass({ 
    render: function() { 
    return <View style={styles.container}> 

     <View style={styles.headline}> 
     <Text>Hello World</Text> 
     </View> 

     <View style={styles.inputsContainer}> 

     <TextInput style={[styles.input]} placeholder="Email" /> 
     <TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" /> 
     <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}> 
      <Text style={styles.fullWidthButtonText}>Submit</Text> 
     </TouchableHighlight> 

     </View> 
    </View> 
    }, 
    buttonPressed: function() { 
    console.log('button was pressed!'); 
    } 
}); 

var paddingLeft = 15; 


var styles = StyleSheet.create({ 
    inputsContainer: { 
    flex: 1 
    }, 
    fullWidthButton: { 
    backgroundColor: 'blue', 
    height:70, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'center' 
    }, 
    fullWidthButtonText: { 
    fontSize:24, 
    color: 'white' 
    }, 
    input: { 
    paddingLeft: paddingLeft, 
    height: 40, 
    borderColor: 'black', 
    backgroundColor: 'white', 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: '#f0f0f0', 
    alignItems: 'stretch', 
    }, 
    headline: { 
    } 
}); 



AppRegistry.registerComponent('MyModule',() => MyModule); 

Answer 2

Sono venuto qui cercando la stessa domanda. Dopo aver sperimentato ulteriormente, ho trovato che il modo più semplice è utilizzare alignSelf: 'stretch'. Questo forza il singolo elemento a occupare tutta la larghezza disponibile, ad es.

La risposta di Nader funziona ovviamente, ma questo sembra essere il modo corretto di utilizzare Flexbox.

Answer 3

Impressionante mi piace, alignSelf: 'stretch', è la strada da percorrere ..