Przycisk pełnej szerokości z flex-boxem w trybie natywnego reagowania

Question

Jestem nowy w flexbox i nie jestem w stanie wyprodukować przycisku pełnej szerokości reagującego natywnie. Próbowałem to rozgryźć przez ponad jeden dzień i przeczytałem każdy powiązany artykuł/post w Internecie bezskutecznie.

Chciałbym mieć dwa elementy TextInput, które rozciągają się na całą szerokość ekranu, z przyciskiem pod nimi, który obejmuje również całą szerokość ekranu. Elementy TextInput są na całej szerokości ekranu, ale wydaje się, że domyślnie jest to symulator Androida, na którym działam.

Oto mój kod:

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; 

ktoś wie co trzeba zrobić, aby uzyskać TouchableHighlight aby objąć całą szerokość ekranu?

Answer 1

Można to osiągnąć przez ustawienie flex: 1 nieruchomość na elemencie dominującej TouchableHighlight, a następnie przypisanie flexDirection: własność rząd do elementu 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' 
    } 

Mam utworzenia pełnej obróbce przykład here. Pełny kod znajduje się poniżej.

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

Przyszedłem tutaj szukając tym samym pytaniem. Eksperymentując dalej, odkryłem, że najprostszym sposobem jest użycie alignSelf: 'stretch'. Zmusza to pojedynczy element do zajęcia całej dostępnej szerokości, na przykład

button: { 
    alignSelf: 'stretch' 
} 

Odpowiedź Nadera działa oczywiście, ale wydaje się, że jest to poprawny sposób korzystania z Flexbox.

Answer 3

Niesamowite Lubię go, alignSelf: 'stretch', jest do zrobienia ..