React-pdf中带斜杠的border-radius属性无法生效的问题求助

问题原因 #

React-PDF的样式解析器不支持CSS标准里border-radius: 水平值/垂直值的斜杠简写语法，当传入"4px/2px"时，解析过程无法正确转换数值，从而抛出unsupported number: NaN错误。

解决方法 #

使用React-PDF支持的数组或对象格式来分别定义圆角的水平和垂直半径：

方法1：统一设置四个角的水平/垂直圆角 #

直接传入数组，第一个元素为水平半径，第二个为垂直半径：

<View style={{ borderRadius: [4, 2], backgroundColor: "red" }}>
  Hello
</View>

方法2：单独设置每个角的圆角 #

如果需要为不同角设置不同的圆角值，可使用对象形式，每个角的值传入[水平半径, 垂直半径]数组：

<View 
  style={{ 
    borderRadius: {
      topLeft: [4, 2],
      topRight: [4, 2],
      bottomLeft: [4, 2],
      bottomRight: [4, 2]
    },
    backgroundColor: "red" 
  }}
>
  Hello
</View>

以上两种写法都能实现和border-radius:4px/2px一致的半圆角效果，同时避免解析错误。

内容的提问来源于stack exchange，提问作者0MUHAMMEDIRFAN