两个宽度相等的按钮水平填充React Native中的屏幕

Question

我需要创建两个或多个宽度相等且水平对齐的按钮,根据屏幕宽度按钮的宽度可能会有所不同.

Answer 1

您可以将按钮包装为弯曲视图:

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,
  }
});

以下是Sketch的一个工作示例:https: //snack.expo.io/SyMpPSise