React Native中的椭圆边框半径

Question

我在尝试在React Native中重新创造这个形状。它是由两个重叠的形状制成的，一个正方形和一个上下部分带有边框半径的形状（正方形用于隐藏顶部的边框半径）。

以下是用于生成它的CSS：

#square {
   width: 200px;
   height: 180px;
   background: red;
 }

 #tv {
   position: relative;
   margin-top: 100px;
   width: 200px;
   height: 200px;
   margin: 20px 0;
   background: red;
   border-radius: 100px / 20px;
 }

但是我找不到有关border-radius属性的文档，因此我不知道是否可以像CSS中那样做椭圆形半径。

- André Popovitch

Answer 1

构建一个椭圆视图。

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <View style={styles.oval}/>

      </View>
    );
  }
}

const styles = StyleSheet.create({
    oval: {
        width: 100,
        height: 100,
        borderRadius: 50,
        //backgroundColor: 'red',
        borderWidth:2,
        borderColor:'black',
        transform: [
          {scaleX: 2}
        ]
    },
    container:{
      flex:1,
      alignItems:'center',
      justifyContent:'center'
    }
});

游乐场：https://snack.expo.io/BJd-9_Fbb

这可能是与您提供的形状类似的形状。

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
//import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <View style={styles.oval}/>
        <View style={styles.square}/>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  square:{
    width:200,
    height:180,
    backgroundColor:'red',
    position:'absolute',
    top:160

  },
    oval: {
        position:'absolute',
        width: 100,
        height: 200,
        borderRadius: 50,
        backgroundColor: 'red',
        //borderWidth:2,
        //borderColor:'black',
        transform: [
          {scaleX: 2}
        ]
    },
    container:{
      flex:1,
      alignItems:'center',
      justifyContent:'center'
    }
});
`

https://snack.expo.io/r11PnOK-Z``

编辑

你可以像下面这样为不同的顶点添加不同的边框半径。

 borderTopLeftRadius: '10%',
 borderTopRightRadius: '30%',
 borderBottomLeftRadius: '50%',
 borderBottomRightRadius: '70%',

游乐场：https://snack.expo.io/BJd-9_Fbb

- Ansal Ali

---

这不完全是我想要的形状（我想要链接中形状的硬边角），但它已经足够了！感谢你的所有帮助！ - André Popovitch