Bouton pleine largeur w / flex-box dans react-native
je suis nouveau sur flexbox et je suis incapable de produire un bouton pleine largeur dans react-native. J'ai essayé de comprendre cela moi-même pendant plus d'une journée et ont lu chaque article / poste connexe sur l'internet en vain.
je voudrais avoir deux TextInput éléments qui s'étendent sur toute la largeur de l'écran, avec un bouton au-dessous d'eux, qui s'étend sur toute la largeur de l'écran. TextInput étendant sur toute la largeur de l'écran, mais cela semble être par défaut dans le simulateur Android que j'exécute.
Voici mon code:
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;
quelqu'un sait ce que je dois faire pour obtenir l' TouchableHighlight étendre sur toute la largeur de l'écran?
4 réponses
vous pouvez y parvenir en paramétrant une propriété flex:1 sur l'élément parent du TouchableHighlight, puis en assignant une propriété flexDirection:row à L'élément 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'
}
j'ai mis en place un travail complet exemple ici. Aussi, le code complet est ci-dessous.
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);
je suis venu ici pour la même question. Ayant expérimenté plus loin, j'ai trouvé le moyen le plus simple est d'utiliser alignSelf: 'stretch'. Cela force l'élément individuel à prendre toute la largeur disponible par exemple
button: {
alignSelf: 'stretch'
}
la réponse de Nader fonctionne bien sûr, mais cela semble être la bonne façon D'utiliser Flexbox.
maintenant il y a un bouton de Composant prédéfini. Même si vous utilisez du texte, vous devez faire attention à la largeur de la vue:
<View style={[{width:"100%"}]}>
<Button
onPress={this.closeModal}
title="Close"
color="#841584"
style={[{borderRadius: 5,}]}
hardwareAccelerated
/>
</View>
permet D'utiliser la source ci-dessous qui aide à définir la largeur et la hauteur du bouton. Ici, vous devez spécifier les paramètres largeur et hauteur du bouton dans la disposition de la vue.
<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#90A4AE"
/>
</View>