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

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元素本身。left另一种选择是使用该容器的View#onLayout根据容器宽度计算自己。也可以使用Dimensions从屏幕宽度计算它（如果您的元素可以根据屏幕宽度而不是父宽度定位）