react-native - React Native 中两个宽度相等的按钮水平填满屏幕

Question

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

Answer 1

您可以将按钮包装到弯曲的 View 中:

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