如何在React Native中定义margin/padding shorthand?
margin: 10px 20px;
如何在React Native中定义margin/padding shorthand?
margin: 10px 20px;
当使用纯React Native样式时,可以将您的CSS重写为:
{ marginVertical: 10, marginHorizontal: 20 }
如果您使用的是类似于styled-components这样的工具,则可以实现上述语法,其在底层使用css-to-react-native。
我在之前的项目中创建了这个辅助函数:
const getShortHand = (style: string, ...values) => {
if (values.length === 1) {
return { [style]: values[0] }
}
const _genCss = (...values) => ({
[style + 'Top']: values[0],
[style + 'Right']: values[1],
[style + 'Bottom']: values[2],
[style + 'Left']: values[3],
})
if (values.length === 2) {
return _genCss(values[0], values[1], values[0], values[1])
}
if (values.length === 3) {
return _genCss(values[0], values[1], values[2], values[1])
}
return _genCss(values[0], values[1], values[2], values[3])
}
export const padding = (...values: Array<number | string>) => getShortHand('padding', ...values)
export const margin = (...values: Array<number | string>) => getShortHand('margin', ...values)
用法与常规CSS缩写类似:
const styles = StyleSheet.create({
button: {
...padding(12, 20),
},
}
margin: 10px 50px 20px 0;
,但对我来说这并不起作用,事实上,在尝试使用它时会导致Android运行时崩溃。 - Joshua Pinter