将 borderRadius 传递给 react-native

Question

我将如何传递一个取自普通CSS的borderRadius

border-radius: 50% 50% 4px 50%

react-native ？

我试过了

borderRadius: "50% 50% 4px 50%"

但这给了我

预期的动态类型双精度，但具有类型字符串

Answer 1

尝试使用 borderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadius 和 borderTopRightRadius 单独设置每个角。

此外，使用 react 时，值仅接受数字。

Answer 2

react-native 在 camelCase 中实现了所有样式或道具。所以要提供borderRadius，你必须使用borderRadius风格的道具。边框的其他样式道具是borderTopLeftRadius，b orderTopRightRadius，borderBottomLeftRadius，borderBottomRightRadius。

50,50 的圆示例

render(){
    return(
    <View style={{height:50, width:50, borderRadius:25, backgroundColor:'#555555'}}/>
    )
}

Answer 3

不能传递百分位值，因为

React Native 中的所有维度都是无单位的，并且表示与密度无关的像素。

这意味着您不能使用百分比和像素。

同样，borderRadius需要双精度而不是字符串，并且要为不同的角应用不同的值，您需要使用

borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius

或者，您可以编写一个帮助程序函数

const getBorderRadius = (borderTopLeftRadius = 0, borderTopRightRadius = 0, borderBottomLeftRadius = 0, borderBottomRightRadius = 0) => {
  return {
    borderTopLeftRadius,
    borderTopRightRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius
  }
}

然后，您可以在样式中像这样使用它

<View styles={Object.assign({ <insert your styles here> }, getBorderRadius(10, 10, 10, 10)} />

如果你的项目支持对象展开（可能需要转换-对象-休息-展开），那么你可以简单地编写

<View styles={{ <insert your styles here>, ...getBorderRadius(10, 10, 10, 10)}}/>

如果你想使用50%，你必须自己计算。如果您知道组件的高度和宽度，那就太好了，这很容易。