Flex box 不是预期的 React Native 结果？

Question

我正在使用 flex-box 设计 UI 反应本机应用程序。但是它的代码没有显示预期的结果？

问题

InnerContainer2 的边距属性 margin:'5%' 未垂直覆盖相等的 space。

代码：

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

您可以使用 marginVertical 和 marginHorizontal 属性代替 margin。

Answer 2

好的，两件事：

1) Margin/Padding 不能很好地与 'percentage values' 一起使用，因为它会干扰其他组件的高度和宽度。因此，请始终使用准确的值。如果您担心其他屏幕尺寸，那么您可以使用尺寸库来计算任何屏幕的确切宽度和高度，并从那里分配边距。

2) 当您必须为父元素内的两个组件分配比例时，通常会使用 Flex。此示例将使子组件占其父元素的 50%。

例如：

父组件=> flex: 1

child(A) 组件 => 弹性：0.5

子（B）组件 => 弹性：0.5

除了我对你的风格做了一些调整 class。它按预期工作。希望你明白或者你可以问我:)

  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

Flex box 不是预期的 React Native 结果？

Flex box not expected result in react native?

react-native

react-native-flexbox