Как исправить свойство marginHorizontally во Flexbox не работает? - PullRequest
Новая
       32

Как исправить свойство marginHorizontally во Flexbox не работает?

0 голосов
/ 01 февраля 2019

Я настраиваю несколько экранов для приложения, использующего React-Native, и хочу полностью понять, как работает Flexbox.

Я пытаюсь установить свойство marginHor horizontal в стиле textinput и button, но ничего не происходит.

Если я задаю конкретное значение ширины, у меня нет проблем.

Почему marginHor horizontal не работает должным образом?

Первое изображение - это то, что я получаю, используя marginHorizont (размер кнопки не меняется, а поле на доске не равно 10);

Второе изображение - это то, что я получаю, когда я использую опору ширины (размер кнопки изменяется в соответствии со значением ширины).

Мне просто интересно, почему с помощью marginHorizontal prop ничего не происходит.

enter image description here enter image description here

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
  }
})
...