提问者:小点点

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


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

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

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

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

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


共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,
}