React Native 中的边距或填充简写答案

【问题标题】：Margin or Padding Shorthand in React NativeReact Native 中的边距或填充简写
【发布时间】：2018-02-23 19:46:31
【问题描述】：

如何在 React Native 中定义边距/填充简写？

margin: 10px 20px;

【问题讨论】：

奇怪的是，文档说它支持字符串 (reactnative.dev/docs/layout-props#margin)，甚至引用了 MDN 列表 (developer.mozilla.org/en-US/docs/Web/CSS/margin)，您可以在其中传入像 margin: 10px 50px 20px 0; 这样的字符串，但它不为我工作，事实上，当我尝试使用它时，它会使我的 Android 运行时崩溃。

标签： css react-native

【解决方案1】：

当使用简单的 React Native 样式时，您可以将上面的 css 重写为

{ 边距垂直：10，边距水平：20 }

否则，如果您使用styled-components 之类的东西，则可以实现上述语法，它在后台使用css-to-react-native。

【讨论】：

@resizemyimg.com 还不行。这只是我对 ReactNative 的建议。

【解决方案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),
  },
}

【讨论】：