Пограничный радиус Нижняя ошибка Реагировать Родной

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