边框半径底部 Bug React Native答案

【问题标题】：Border Radius Bottom Bug React Native边框半径底部 Bug React Native
【发布时间】：2019-03-07 16:32:36
【问题描述】：

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

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

【问题讨论】：

标签： css reactjs react-native sass less

【解决方案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

【讨论】：