React-native：弹性布局中未考虑边距答案

【问题标题】：React-native: margin not taken into account in a flex layoutReact-native：弹性布局中未考虑边距
【发布时间】：2019-01-10 19:56:00
【问题描述】：

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

我设法用一个小代码 sn-p 重现了这个问题：

这是一个自定义组件：

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 个绿色方块相互重叠，相隔 12 像素（由于 marginTop）。相反，这是我所看到的：

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

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

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

【问题讨论】：

标签： react-native flexbox

【解决方案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 作为prop 传递给MyView。我添加了propTypes 和defaultProps，因为你偶尔会通过style 属性。

来自 React 文档

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

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

【讨论】：

这完全有道理，我没有意识到我正在跳过 style 道具。有什么理由我们不应该总是在自定义组件中写style={[style, {...}]}？
样式形状是从外部控制样式可以更改的内容，对吧？
是的，这是正确的，您实际上只允许将 marginTop 样式属性传递给您的组件。其他任何事情都会引发警告。

【解决方案2】：

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

justifyContent = "空格"

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

alignItems: "居中", flexDirection：“列”

而不是顶部和底部的边距对我有用。

【讨论】：