我想这个问题最好用一个例子来描述:
假设我想对一个元素应用margin,如下所示:
const myView = () => <View style={styles.viewStyle}></View>
const styles = StyleSheet.create({
viewStyle: {
margin: "0 0 5 10",
},
})
在没有多个边际报表的情况下,有可能做到这一点吗?
感谢阅读。
我不认为你可以,除非你写一个函数来做这样的事情。像这样:
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,
}