如何在react native中设计半圆/椭圆？

Question

我是react原生的新手。我正在设计UI，我想在其中设计半圆形或椭圆形。我试过了，但输出不符合预期。我们可以在react原生中使用canvas或svg吗？

实际：

​

​

当前：

​

​

Code.js

     <View style={{ flex: 1, flexDirection: 'row' }}>    
          <View style={styles.circleSkyBlue}></View>
          <View style={styles.circleViolet}></View> 
     </View>

code.css

      circleViolet:{
            width: 239,
            height: 134,
          
            borderBottomRightRadius: 50,
            borderBottomLeftRadius: 100, 
            backgroundColor: '#596AB2',
            transform: [
                {scaleX: 1.2}
                ] 
        },
        circleSkyBlue:{
            width: 180,
            height: 84,               
            borderBottomRightRadius: 100,
            borderBottomLeftRadius: 50,
          
            backgroundColor: '#69C0EC',
            transform: [
                {scaleX: 1}
                ] ,
                overflow: 'hidden', 
        },

任何帮助都是非常感谢的。提前谢谢你

Answer 1

我已经创建了一个小吃，您可以在其中检查示例。这里不需要使用egg，你可以使用position来获得你想要的UI。

点心：https://snack.expo.io/@ashwith00/ovals

代码：

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';

const {width} = Dimensions.get('window')

const oval1Width = width * 0.5, oval2Width = width * 0.7;
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
     <View style={styles.oval1} />
     <View  style={styles.oval2} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  oval1: {
    position: 'absolute',
    width: oval1Width,
    height: oval1Width,
    borderRadius: oval1Width / 2,
    backgroundColor: 'red',
    top: -oval2Width / 3,
    left: -10,
zIndex: 3,
  },
  oval2: {
     position: 'absolute',
    width: oval2Width,
    height: oval2Width,
    borderRadius: oval2Width / 2,
    backgroundColor: 'blue',
    top: -oval2Width / 2.5,
    right: -10,
    zIndex:2
  },
});