在css语句中响应本机样式表多个值

Question

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

假设我想对一个元素应用margin,如下所示：

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

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

在没有多个边际报表的情况下，有可能做到这一点吗？
感谢阅读。

Answer 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),
  },
})

但是，在最常见的情况下，我们最多只能改变两个方向的边距。当您习惯于样式化时，有很多选项可以快速地对组件进行样式化。示例：

“5 10 5 10”等于

{
  marginVertical: 5,
  marginHorizontal: 10,
}

“0 0 0 5”等于

{
  margin: 0,
  marginLeft: 5,
}