将 CSS 文本转换为 React Native 样式表对象
font-size: 18px;
line-height: 24px;
color: red;
js
{
fontSize: 18,
lineHeight: 24,
color: 'red',
}
将所有数字类型的值转换为数字, 将字符串类型的值转换为字符串。 自动将间接值转换为 React Native 的等价值。css
text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);
js
{
textShadowOffset: { width: 10, height: 5 },
fontVariant: ['small-caps'],
// Fixes backwards transform order
transform: [
{ translateY: 5 },
{ translateX: 10 },
{ scale: 5 },
]
}
还允许简写值。css
font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;
js
{
fontFamily: 'Helvetica',
fontSize: 14,
fontWeight: 'bold',
fontStyle: 'normal',
fontVariant: [],
lineHeight: 16,
marginTop: 5,
marginRight: 7,
marginBottom: 2,
marginLeft: 7,
}
``` 简写值只接受 React Native 中支持的值, 因此 background 只接受颜色, backgroundColor 不接受图像, font 不接受 React Native 不支持的字体变体值。
React Native 的 box-shadow 和 filter 属性会被转换为 boxShadow 和 filter，因此支持取决于您的 React Native 版本。
| CSS 输入 | React Native 输出 |
|---|---|
align-content |
alignContent |
background-color |
backgroundColor |
border-top-left-radius |
borderTopLeftRadius |
font-size |
fontSize |
justify-content |
justifyContent |
text-decoration-color |
textDecorationColor |
text-shadow-radius |
textShadowRadius |
该规则涵盖了标准的一对一映射
暂无开放 Issues，或尚未同步最近议题。