Deux boutons de même largeur remplissent horizontalement l'écran en React Native

Question

J'ai besoin de créer deux ou plusieurs boutons qui seront égaux largeur et alignés horizontalement, en fonction de la largeur de l'écran, la largeur du bouton peut varier.

Answer 1

Vous pouvez envelopper vos boutons dans des vues flexibles:

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 Sketch: https://snack.expo.io/SyMpPSise