Question

我在底部和左侧添加边框时遇到问题，我正在放置属性，但是边框越过了圆圈而不是周围。

 <View style={{
     borderBottomColor:'red',
     borderBottomWidth:20,
     borderRadius:500,
     position: 'absolute',
     left: 0,
     top: 0,
     transform:[{rotate:('180deg')}],
     height: 150,
     width: 150,
     backgroundColor: 'orange',
     boxSizing: 'border-box',
     zIndex: 2000,
     overflow: 'hidden'
 }}></View>

我的想法是得出我在Codepen（https://codepen.io/anon/pen/bmdmWq）中所做的结果

Answer 1

那又怎么样：

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{
          borderRadius: 150,
          left: 0,
          top: 30,
          height: 150,
          width: 150,
          backgroundColor: 'orange',
        }}>
          <View style={{
            borderTopColor: 'red',
            borderTopWidth: 75,
            borderRadius: 150,
            left: 0,
            top: 0,
            height: 150,
            width: 150,
            zIndex: 1,
            position: 'absolute'

          }} />
          <View style={{
            borderTopColor: 'orange',
            backgroundColor: 'orange',
            borderTopWidth: 60,
            borderRadius: 140,
            left: 10,
            top: 10,
            height: 130,
            width: 130,
            zIndex: 1,
            position: 'absolute'

          }} />
          <View style={{
            borderTopColor:'green',
            borderTopWidth:5,
            left: 0,
            top:75,
            width: 150,
            zIndex: 1,
            position:'absolute'
          }} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1'
  }
});

我想您仍然需要调整一下大小以使结果与您的图片完全匹配

这是一个正在运行的示例：https://snack.expo.io/@kamiranoff/quiet-raisins

Border Radius Bottom Bug React Native

1 个答案: