React Native中的边距或填充速记

时间:2018-02-23 19:46:32

标签: css react-native

如何在React Native中定义边距/填充速记?

CSS

margin: 10px 20px;

2 个答案:

答案 0 :(得分:28)

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

{
  marginVertical: 10,
  marginHorizontal: 20
}

否则,如果您使用styled-components之类的内容,可以实现上述语法,而css-to-react-native则使用{{3}}。

答案 1 :(得分:3)

我在上一个项目中创建了此辅助函数:

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),
  },
}
寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1