React Native中的橢圓邊框半徑

Question

我試圖在React Native中重新創建this shape。它由2個重疊的形狀組成，一個是正方形，一個是頂部和底部的邊界半徑（正方形在那裏隱藏頂部的邊界半徑）。

下面是用來生成它的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; 
} 

但我不能找到關於邊界半徑財產的任何文件，所以我不知道這是否是可以做到的橢圓半徑狀即可在CSS。

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

這可以類似於已given.`所述一個形狀

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

Answer 2

我認爲React Native只接受borderRadius屬性的一個數字值，但是對於需要兩秒鐘的時間，最簡單的事情就是嘗試。

如果您只是想創建該形狀，請考慮使用SVG。這post顯示如何創建一個橢圓形。舊式的語法，但你得到的主旨。

var Oval = React.createClass({ 
    render: function() { 
     return (
      <View style={styles.oval} /> 
     ) 
    } 
}); 

var styles = { 
    oval: { 
     width: 100, 
     height: 100, 
     borderRadius: 50, 
     backgroundColor: 'red', 
     transform: [ 
      {scaleX: 2} 
     ] 
    }, 
};