Question

如何传递borderRadius取自CSS之类的<{p}}

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

到react-native？

我试过

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

但那给了我

预期动态类型为double，但具有类型字符串

Answer 1

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 2

尝试使用borderBottomLeftRadius，borderBottomRightRadius，borderTopLeftRadius和borderTopRightRadius分别设置每个角落。

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

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)} />

如果您的项目支持Object Spread（可能需要transform-object-rest-spread），那么您只需编写

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

如果你想使用50％，你必须自己计算。如果您知道组件的高度和宽度，那么很容易。

将borderRadius传递给react-native

3 个答案: