Question

我正在尝试制作一个左下角弯曲的左侧和下侧有边框的标签，但我只能让它在所有边上都有边框或没有边框。如果我使用类似的东西，我会在各方面得到它：

tab2:{
 top: 3*width/8,
 width: 3*width/16,
 backgroundColor: 'red',
 borderColor:'white',
 height: width/8,
 borderBottomLeftRadius: 100,
 borderWidth: 1,
 borderRightWidth: 0,
 borderTopWidth: 0,
 borderTopColor: 'transparent
 borderRightColor: 'transparent'}

如果我拿出borderWidth: 1,，我根本就没有边界。有什么建议吗？

Answer 1

我只是重叠了 View 组件并仅在左上角和右下角区域创建了边框这是世博会演示链接：- https://snack.expo.io/@vivek22719/multiple-screens

这是我的代码：-

   <View style={{width:297,height:128,backgroundColor:"#fff",borderWidth:1,marginTop:20,borderColor:"darkcyan"}}>
   <View style={{width:300,height:130,top:-2,left:-2,backgroundColor:"#fff",borderTopStartRadius:40,borderBottomEndRadius:40,display:"flex",justifyContent:"center",alignItems:"center"}}}}><Text style={{fontSize:24,color:"darkcyan"}}>A space for parents</Text><Text style={{fontSize:24,color:"darkcyan"}}> by parents</Text>
   </View>
   </View>

Answer 2

正如你所提到的，边界将是全部或全部。如果您尝试使用单方，则可以使用Android，但可能无法在IOS上使用。您可以通过提供正确的View和height来尝试使用width。我已经使用View设置了底部边框。

对于左边和下边框，它很难但可能会在主要元素设计之间使用两个View元素。一个用于左侧，另一个用于底部。

Answer 3

使用borderLeft和borderBottom

定义左下角的边框

tab2:{
 top: 3*width/8,
 width: 3*width/16,
 backgroundColor: 'red',
 borderColor:'white',
 height: width/8,
 borderBottomLeftRadius: '100',
 borderLeft: '1',
 borderBottom: '1',

}

如何在使用边框半径时仅在一个角/两边创建边框 - React Native

3 个答案: