如何在react-native中重置边距？

Question

仍在习惯反应原生样式。我注意到重置边距的工作方式与普通网络略有不同。对于上下文，我正在使用react-native for web。

如果您执行以下操作

<View style=[{ verticalMargin: 10 }, { margin: 0 }] />

我的期望是视图将所有边距重置为 0，但实际上垂直边距没有重置，顶部和底部边距保持 10 作为其值。根据 docs

，这对我来说没有意义

数组中最后一个样式优先

是因为

verticalMargin

比

margin

更具体吗？

Answer 1

这是我们在使用可重用样式或组件时在 React Native 开发中面临的常见问题。

要解决此边距问题，您可能需要从视图或任何其他组件的每一侧重置边距值。

例如。

<View style={
    [
      {
        marginVertical: 10,
        marginHorizontal: 20
      },
      {
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0,
      },
    ]
  }
/>