css - 如何修复 Flexbox 中的 marginHorizo​​ntal 属性不起作用？

Question

我正在为使用 React-Native 的应用程序设置一些屏幕，我想完全了解 Flexbox 的工作原理。

我正在尝试以 textinput 和按钮的样式设置 marginHorizo​​ntal 属性，但没有任何反应。

如果我设置宽度的具体值，我没有任何问题。

为什么 marginHorizo​​ntal 不能正常工作？

第一个图像是我使用 marginHorizo​​ntal 得到的（按钮的大小没有改变，板的边距不是 10）；

第二张图片是我使用 width 道具时得到的（按钮大小根据宽度的值而变化）。

我只是想知道为什么使用 marginHorizo​​ntal 道具，什么都没有发生。

import React, { Component } from 'react'
import {Text, StyleSheet, View, TextInput, TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper';
import {Button} from 'react-native-elements'

const formInputColor = 'rgba(255, 255, 255, 0.2)'
const formInputPlaceholderColor = 'rgba(255, 255, 255, 0.7)'

export default class RegisterFormComponent extends Component{

  render(){
      return(
        <Swiper 
          style={styles.wrapper}
          loop = {false}
        >

        <View style={styles.slide1}>

          <View style={styles.topContainer1}>

          <Text 
            style={styles.text}>What's you mail?
          </Text>

          <TextInput
            placeholder = "Email"
            placeholderTextColor = {formInputPlaceholderColor}
            returnKeyType = "next"
            style = {styles.formInput}
          />

          <Text 
            style={styles.underText}
            multiline={true}>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
          </Text>

          <Button
            style={styles.buttonStyle}
            //textStyle = {styles.buttonTextStyle}        
            //loading={false}
          >
          </Button>

          </View>

          <View style={styles.bottomContainer1}>
          </View>

        </View>


        <View style={styles.slide2}>

        <View style={styles.topContainer1}>

            <Text 
              style={styles.text}>Choose your password
            </Text>

            <TextInput
              placeholder = "Password"
              placeholderTextColor = {formInputPlaceholderColor}
              secureTextEntry
              returnKeyType = "go"
              style = {styles.formInput}
            />

            </View>

            <View style={styles.bottomContainer1}>
            </View>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
      )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  slide1: {
    flex: 1,
    backgroundColor: '#3498db',
  },
  buttonStyle: {
    backgroundColor: '#2980b9', 
    marginTop: 10, 
    height: 25,
    marginHorizontal: 10
  },
  buttonTextStyle: {
    fontSize: 10
  },
  topContainer1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  logoStyle: {
    width: 100, 
    height: 100, 
  }, 

  bottomContainer1: {
    flex: 1,
  },
  formInput:{
    height: 40, 
    backgroundColor: formInputColor, 
    color: '#FFF',
    marginHorizontal: 10,
    paddingHorizontal: 10,
    textAlignVertical: 'top'
  },
  slide2: {
    flex: 1,
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#000',
    fontSize: 20,
    padding: 10,
    fontWeight: 'bold'
  }, 
  underText: {
    color: 'black',
    fontSize: 12,
    marginTop: 8,
    textAlign: 'center',
    width: 300
  }
})