楕円罫線の半径がネイティブで

Question

this shapeをリアクションネイティブに再作成しようとしています。 2つの重なり合った形、1つの正方形、1つは上と下に境界半径を持つもので作られています（正方形は上の境界の半径を隠すためにそこにあります）。ここで

は、それを生成するために使用される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; 
} 

しかし、私はボーダー-radiusプロパティ上の任意のドキュメントを見つけることができないので、それはあなたができるような楕円形の半径を行うことは可能だ場合、私は知りません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

これは、 ``あなたが

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をgiven.`たものに似た形状であってもよいです

Answer 2

私はReact NativeがborderRadiusのプロパティのために単一の数値だけを受け入れると思いますが、2秒間は最も簡単なことは試してみることです。

その形状を作成したいだけなら、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} 
     ] 
    }, 
};