React native React native：flex布局中未考虑边距

我在使用flexbox布局视图时遇到过几次边距问题

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

下面是一个自定义组件：

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

类MyView扩展组件{
render（）{
返回(
);
}
}

下面是我如何使用它：

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

所以我希望看到两个绿色的正方形在彼此的顶部，由12px隔开（由于marginTop）。相反，我看到的是：

这两个正方形互相接触。我不知道为什么不考虑差额

我尝试使用inspector工具调试底部视图，下面是显示的内容：

您实际上可以看到此图像上的边距（浅橙色）。知道为什么不考虑边距吗？

类MyView扩展组件{
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
  } 
}

render（）{
const{style}=this.props；
返回(
);
}
}
MyView.propTypes={
样式：React.propTypes.shape({
marginTop:React.propTypes.number
})
}
MyView.defaultProps={
风格：{
玛金托普：0
} 
}

您正在将

style

作为

prop

传递到

MyView

。我添加了

propTypes

和

defaultProps

，因为您只是偶尔传递

style

prop

从React文档

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

---

因为您的组件不是核心组件，

style

不能像您期望的那样工作。

我在使用flex和

justifyContent=“间距”

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

对齐项目：“中心”， flexDirection：“列”

---

相反，页眉和页脚的边距对我来说很有用。

这完全有道理，我没有意识到我跳过了

样式。有什么理由不应该总是在自定义组件中编写
style={[style，{…}]}
？样式形状是为了控制可以从外部更改的样式，对吗？是的，这是正确的，实际上只允许
marginTop
style属性传递到组件。其他任何东西都会发出警告。