Гибкая коробка не ожидала результата в реакции родной?

Question

Я проектирую пользовательский интерфейс реагирующего нативного приложения, используя flex-box.Но если код не показывает ожидаемый результат?

Задача

Свойство поля для InnerContainer2 равно margin:'5%' и не охватывает равное пространство по вертикали.

Код:

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.innerContainer1}>
          <View style={styles.innerContainer2}>
            <Text style={styles.welcome}>This is live reload</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  innerContainer1: {
    flex: 1,
    width: '80%',
    margin: '10%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgrey'
  },
  innerContainer2: {
    flex: 1,
    width: '80%',
    margin: '5%',
    height: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  welcome: {
    textAlign: 'center',
    margin: 10,
  }
});

Ожидаемый результат

Фактический объем производства

Answer 1

хорошо, 2 вещи:

1) Margin / Padding не очень хорошо работает с «процентными значениями», потому что он влияет на высоту и ширину других компонентов. Поэтому всегда используйте точное значение. Если вас беспокоят другие размеры экрана, вы можете использовать библиотеку размеров, чтобы рассчитать точную ширину и высоту любого экрана и назначить поле оттуда.

2) Flex обычно используется, когда необходимо назначить соотношение для двух компонентов внутри родительского элемента. Этот пример заставит дочерние компоненты брать 50% пропорции их родительского элемента.

Например:

Родительский компонент => flex: 1

дочерний (A) компонент => flex: 0,5

дочерний (B) компонент => flex: 0,5

Кроме того, я немного подкорректировал ваш класс стиля. Он работает как задумано. Надеюсь, вы понимаете, или вы можете спросить меня:)

  const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey',
  },
  innerContainer1: {
    // flex: 1, used when you have to assign a ratio for two components inside a parent element
    width: '80%',
    height: '80%',
    margin: 10,
    justifyContent: 'center',
    //  alignItems: 'center',      It gives the desired result when used in the parent component.
    backgroundColor: 'lightgrey',
  },
  innerContainer2: {
    // flex: 1, used when you have to assign a ratio for two components inside a parent element.
    width: '80%',
    margin: 30,
    height: '80%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  welcome: {
    textAlign: 'center',
    margin: 10,
  },
});

Ссылки

https://facebook.github.io/react-native/docs/height-and-width.html

https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

Answer 2

Вы можете использовать marginVertical и marginHorizontal свойства вместо margin.