React-native：在flex布局中不考虑边距

Question

使用flexbox布局视图时，我遇到了几次边距问题。

我设法用一个小代码片段重现了这个问题：

这是一个自定义组件：

class MyView extends Component {
  render() {
    return (
      <View style={
        {
          backgroundColor: 'green',
          width: 50,
          height: 50
        }
      }/>
    );
  }
}

以下是我如何使用它：

<View style={{ flexDirection: 'column' }}>
  <MyView />
  <MyView style={{ marginTop: 12 }}/>
</View>

所以我期待在彼此的顶部看到2个绿色方块，相隔12px（由于marginTop）。相反，这就是我所看到的：

两个方块相互接触。我不知道为什么不考虑保证金。

我尝试使用检查器工具调试底部视图，以下是显示的内容：

您实际上可以在此图像上看到边距（浅橙色）。知道为什么没有考虑保证金吗？

Answer 1

class MyView extends Component {
  render() {
    const { style } = this.props;
    return (
      <View style={
        [style, {
          backgroundColor: 'green',
          width: 50,
          height: 50
        }]
      }/>
    );
  }
}

MyView.propTypes = {
  style: React.propTypes.shape({
    marginTop: React.propTypes.number
  })
}

MyView.defaultProps = {
  style: {
    marginTop: 0
  } 
}

您将style作为MyView传递给prop。我添加了propTypes和defaultProps，因为您有时只会传递style道具。

来自React docs

  

所有核心组件都接受名为style的道具。

由于您的组件不是核心组件，style无法按预期运行。

Answer 2

使用flex时，我也遇到了同样的问题

  

justifyContent =“之间的空间”

margin top和marginBottom对我不起作用。后来我删除了justifyContent并放了

  

alignItems：“居中”，     flexDirection：“列”

相反，margin的顶部和底部对我有用。