javascript - 在 css 语句中反应原生样式表多个值
问题描述
我认为这个问题最好用一个例子来描述:
假设我想将边距应用于这样的元素:
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),
},
})
但是,在最常见的情况下,我们最多只更改 2 个方向的边距。当您习惯了样式时,有多种选项可以快速为您的组件设置样式。例子:
“5 10 5 10”等于
{
marginVertical: 5,
marginHorizontal: 10,
}
“0 0 0 5”等于
{
margin: 0,
marginLeft: 5,
}
推荐阅读
- python - 如何在没有错误的情况下访问 iFrame 内的不和谐小部件?
- javascript - ES6 语法参考:在声明期间使用扩展和布尔短路有条件地向对象添加字段
- c# - 如何在代码中切换“只是我的代码”?
- python - 编写程序来读取/关闭文件,并显示以下输出
- google-chrome - chrome.webRequest.onBeforeRequest.addListener 后台 Ajax 请求?
- javascript - 如何使用 JavaScript fetch 将文件数据发布到 Gitlab 项目
- java - Selenium Webdriver 问题无法打开谷歌浏览器
- python - Matplotlib - 对齐网格
- python - 如何使用 django 过滤器或以某种方式获取“最近”元素
- java - 来自 Firebase 的数据未显示在 RecyclerView 中