在 css 语句中反应原生样式表多个值

【问题标题】：React native stylesheet multiple values in css statement在 css 语句中反应原生样式表多个值
【发布时间】：2021-03-28 15:07:47
【问题描述】：

我认为这个问题最好用一个例子来描述：

假设我想对这样的元素应用边距：

const myView = () => <View style={styles.viewStyle}></View>

const styles = StyleSheet.create({
  viewStyle: {
    margin: "0 0 5 10",
  },
})

是否可以在没有多个边距声明的情况下执行此操作？
感谢阅读。

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

我认为你不能，除非你写一个函数来做这样的事情。像这样：

const CommonStyle = {
   margin: (t, r, b, l) => {
        marginTop: t,
        marginRight: r,
        marginBottom: b,
        marginLeft: l,
   }
}

然后按照你的风格：

const styles = StyleSheet.create({
  viewStyle: {
    ...CommonStyle.margin(0, 0, 5, 10),
  },
})

但是，在最常见的情况下，我们最多只更改 2 个方向的边距。当您习惯了样式时，有多种选项可以快速为您的组件设置样式。示例：

“5 10 5 10”等于

{
  marginVertical: 5,
  marginHorizontal: 10,
}

“0 0 0 5”等于

{
  margin: 0,
  marginLeft: 5,
}

【讨论】：