在React Native中使用的边距或内边距（Margin或Padding）简写方式。

Question

如何在React Native中定义margin/padding shorthand？

margin: 10px 20px;

- Jeaf Gilbert

---

奇怪的是，文档中说它支持字符串 (https://reactnative.dev/docs/layout-props#margin)，甚至引用了MDN的列表 (https://developer.mozilla.org/en-US/docs/Web/CSS/margin) ，你可以传入一个字符串，例如 margin: 10px 50px 20px 0;，但对我来说这并不起作用，事实上，在尝试使用它时会导致Android运行时崩溃。 - Joshua Pinter

@JoshuaPinter React Native的文档很糟糕，所以这并不奇怪。它们经常是错误或不清楚的。 - Robo Robok

@RoboRobok 没有异议。 :) - Joshua Pinter

Answer 1

当使用纯React Native样式时，可以将您的CSS重写为：

{
  marginVertical: 10,
  marginHorizontal: 20
}

如果您使用的是类似于styled-components这样的工具，则可以实现上述语法，其在底层使用css-to-react-native。

- rk1

Answer 2

我在之前的项目中创建了这个辅助函数：

const getShortHand = (style: string, ...values) => {
  if (values.length === 1) {
    return { [style]: values[0] }
  }
  const _genCss = (...values) => ({
    [style + 'Top']: values[0],
    [style + 'Right']: values[1],
    [style + 'Bottom']: values[2],
    [style + 'Left']: values[3],
  })
  if (values.length === 2) {
    return _genCss(values[0], values[1], values[0], values[1])
  }
  if (values.length === 3) {
    return _genCss(values[0], values[1], values[2], values[1])
  }
  return _genCss(values[0], values[1], values[2], values[3])
}

export const padding = (...values: Array<number | string>) => getShortHand('padding', ...values)
export const margin = (...values: Array<number | string>) => getShortHand('margin', ...values)

用法与常规CSS缩写类似：

const styles = StyleSheet.create({
  button: {
    ...padding(12, 20),
  },
}

- Kazuya Gosho