Deux boutons de largeur égale à l'horizontale de remplir l'écran de Réagir Natif

J'ai besoin de créer deux ou plusieurs boutons qui seront de l'égalité des largeur et alignés horizontalement, basé sur la largeur de l'écran bouton de largeur peut varier.

Deux boutons de largeur égale à l'horizontale de remplir l'écran de Réagir Natif

quelle est la largeur de bouton ?
Pas fixe, Il dépend de sa vue parent largeur.
Ok, donc nous avons besoin, largeur = deviceWidth/nombre de boutons. Je pense que c'est cool
Yep, flex fonctionne bien pour la Vue, mais la même chose ne fonctionne pas avec Bouton.

OriginalL'auteur Vikas Jalan | 2017-03-17

  1. 27

    Vous pouvez vous envelopper Boutons en flexion Vues :

    import React, { Component } from 'react';
import { Button, View, StyleSheet } from 'react-native';

export default const FlexedButtons () => (
  <View style={styles.container}>
     <View style={styles.buttonContainer}>
      <Button title="Button 1"/>
    </View>
    <View style={styles.buttonContainer}>
      <Button title="Button 2"/>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    flex: 1,
  }
});

    Voici un exemple de travail sur le Croquis:
    https://snack.expo.io/SyMpPSise

    travailler avec réagissent-native-éléments de bouton, j'ai dû enlever le flex:1 sur le conteneur et il a bien fonctionné thx.
    J'ai passé des heures à regarder comment le faire! Je n'avais pas à supprimer le flex: 1 à l'aide de réagir-native-éléments.
    À l'aide de "pure" j'ai dû enlever flex:1 sur le conteneur

    OriginalL'auteur guitoof