web-dev-qa-db-fra.com

Bouton pleine largeur avec flex-box dans react-native

Je suis nouveau sur flexbox et suis incapable de produire un bouton pleine largeur dans react-native. J'essaie de le comprendre moi-même depuis plus d'un jour et j'ai lu tous les articles connexes/postez sur internet en vain.

J'aimerais avoir deux éléments TextInput qui couvrent toute la largeur de l'écran, avec un bouton situé en dessous d'eux, qui couvre également toute la largeur de l'écran. Les éléments TextInputare couvrent toute la largeur de l'écran, mais cela semble être par défaut dans le simulateur Android que je cours.

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 que le TouchableHighlight s'étende sur toute la largeur de l'écran?

reactjsreact-nativeflexbox
36
Bibs

Vous pouvez y parvenir en définissant une propriété flex: 1 sur l'élément parent de TouchableHighlight, puis en affectant 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 exemple de travail complet ici . En outre, 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);
20
Nader Dabit

Je suis venu ici à la recherche de la même question. Après avoir expérimenté davantage, j'ai trouvé le moyen le plus simple est d'utiliser alignSelf: 'stretch'. Cela force l’élément individuel à occuper toute la largeur disponible, par ex.

 button: {
    alignSelf: 'stretch'
 }

La réponse de Nader fonctionne bien sûr, mais cela semblerait être la bonne façon d'utiliser Flexbox.

52
Findiglay

Il existe maintenant un composant prédéfini Button. 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>
2
Roman

Permet d'utiliser la source ci-dessous qui permet de définir la largeur et la hauteur du bouton. Ici, vous devez spécifier les paramètres de largeur et hauteur du bouton dans la présentation de la vue.

<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
   <Button
      onPress={this.buttonClickListener}
      title="Button Three"
      color="#90A4AE"
    />
</View>
1
sumit kumar pradhan