如何使用边界半径只为1个角(反应本机) ？

如何使用边界半径反应本机只为1个角落？

我有一个模态窗口

正如你可以看到底部角落不圆，它发生时，我使用背景颜色的按钮。我试图设置溢出隐藏到模态包装器，它没有帮助我。现在我想使用边框半径的按钮(只有1个角)。

我的代码 http://jsbin.com/sexeputuqe/edit?html,css

130216 次浏览

小开

最佳答案

Did you already try with the following?
- borderBottomLeftRadius: number
- borderBottomRightRadius: number
- borderTopLeftRadius: number
- borderTopRightRadius: number

Also, you can find more info in the view component docs.

小开

Add the following properties in your style:

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number

This worked for me.

Thanks

小开

Suppose only the radius is set for the upper left and lower left corners of the Image tag.

<View style={styles.imgBox}>
<Image source=\{\{ uri: 'your image url' }} style={styles.img} />
</View>


const styles = EStyleSheet.create({
imgBox: {
width: px(72),
height: px(72),
borderBottomLeftRadius: 2,
borderTopLeftRadius: 2,
overflow: 'hidden',
},
img: {
width: px(72),
height: px(72),
},
})

looks good for ios.

小开

The CSS syntax in react-native is a little different.

Where traditionally you could use:

borderRadius:0,0,20,0;

where you assign border-radius values clockwise

However in this case you'll have to target individual corners of your element like so:

borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 20,
borderBottomLeftRadius: 0,

Please let me know if this works for you