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;
 }

但是我找不到有关border-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://...............#name

这可能与您给出的形状类似。

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/BJd-9_Fbb``

Answer 2

我认为React Native只接受var ctor = typeof(T).GetConstructors(BindingFlags.NonPublic | BindingFlags.Instance) .FirstOrDefault(c => c.GetParameters() .Select(x => x.ParameterType) .SequenceEqual(new[] {typeof(IBuffer)})); var param = Expression.Parameter(typeof(IBuffer), "param1"); var expr = Expression.New(ctor, param); var lambda = Expression.Lambda<Func<IBuffer, T>>(expr, typeof(T).Name, new[] { param }); return lambda.Compile();属性的单个数值，但是对于它需要的两秒钟，最简单的方法就是尝试。

如果不这样做，如果您只想创建该形状，请考虑使用SVG。这个post显示了如何创建椭圆。旧式语法，但你得到了要点。

type="text/x-mathjax-config"

React Native中的椭圆边界半径

2 个答案: