将 calc() 与 React-Native 和 Styled-Components 一起使用时出错

Question

我在react-native中使用样式组件和

calc()

函数

const MyElement = styled(MyText)`
    position: absolute;
    left: calc(20% - 10px);
`

错误

NSString 类型的 JSON 值“calc(20% - 10px)”无法转换为 YGValue。您忘记了 % 或 pt 后缀吗？

我已经找到了这个解决方案（样式组件中的CSS' calc()）。但我已经在使用空格了。

我做错了什么？

Answer 1

React-native 使用 yoga 布局，不支持

calc

。理想情况下，尝试使用 flex 来定位元素。否则，为元素创建额外的包装，在其上添加

left: 20%

并在元素本身上添加

-10px

。另一种选择是使用该容器的

View#onLayout

根据容器宽度自行计算 left。也可以使用 Dimensions

根据屏幕宽度计算它（如果您的元素可以根据屏幕宽度而不是父宽度定位）

Answer 2

不幸的是React Native不支持

calc()

，但你可以像这样利用Javascript的字符串插值来达到相同的效果：

maxWidth: `${100 / 3}%`

...与

maxWidth: calc(100%/3)

效果相同