css- to- react-inative (英语)

将 CSS 文本转换为 React Native 样式表对象.

试试看

font-size: 18px;
line-height: 24px;
color: red;

{
  fontSize: 18,
  lineHeight: 24,
  color: 'red',
}

将所有类似数字的值转换为数字,将字符串转换为字符串.

自动将间接值转换到它们的回放原生等同物.

text-shadow-offset: 10px 5px;
font-variant: small-caps;
transform: translate(10px, 5px) scale(5);

{
  textShadowOffset: { width: 10, height: 5 },
  fontVariant: ['small-caps'],
  // Fixes backwards transform order
  transform: [
    { translateY: 5 },
    { translateX: 10 },
    { scale: 5 },
  ]
}

还允许用快手值.

font: bold 14px/16px "Helvetica";
margin: 5px 7px 2px;

{
  fontFamily: 'Helvetica',
  fontSize: 14,
  fontWeight: 'bold',
  fontStyle: 'normal',
  fontVariant: [],
  lineHeight: 16,
  marginTop: 5,
  marginRight: 7,
  marginBottom: 2,
  marginLeft: 7,
}

短手只接受React中支持的值,所以 background 只能接受一种颜色, backgroundColor

也有人支持: box-shadow 切换成 shadow- 属性。 请注意,这些只在iOS上工作.

简记

border{Top,Right,Bottom,Left} 手写不支持, 因为 borderStyle 无法适用于个别边界.

API 密码

API主要用于执行者. 然而,主要的API可能对未执行者有用. 主 API 是一组 [property, value] tu.

import transform from 'css-to-react-native';
// or const transform = require('css-to-react-native').default;

transform([
  ['font', 'bold 14px/16px "Helvetica"'],
  ['margin', '5px 7px 2px'],
  ['border-left-width', '5px'],
]); // => { fontFamily: 'Helvetica', ... }

我们不提供一种方法 来得到这些风格的拖拉 在这个图书馆, 所以你需要自己做到这一点。 我期望大多数人会使用 postCSS 或者另一个CSS 解析器。 你应该尽量避免得到这些与 string.split,因为这有很多边缘案例(在评论中出现分号等)

对于执行者,还有少数额外的API可用.

这些是针对特定用途的,大多数人应该只是使用上面的API.

import { getPropertyName, getStylesForProperty } from 'css-to-react-native';

getPropertyName('border-width'); // => 'borderWidth'
getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }

如果您希望选择退出某些缩写转换, 骆驼中的一系列属性名称 案件可以作为第二个论据转交给 transform。 。 。 .

transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }

这也可以通过提出第三个论点来实现, false 改为 getStylesForProperty。 。 。 .

许可证

获得麻省理工学院许可,版权为2019年克里斯特·卡里,雅各布·帕克和马克西米利安·斯托伊伯.

见 利比里亚 更多信息.