React native 使边界半径大于高度的一半

我想制作一个“圆形底部”组件，而不使用

ImageBackground

，如下所示：

我尝试使用

的组合，但是为了简化这个问题中的代码，我使用了

这是我的密码：

import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'

export default class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={classes.container}>
        <View style={classes.block} />
        <View style={classes.roundedBlock} />
      </View>
    )
  }
}

const classes = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
  },
  block: {
    height: 135,
    backgroundColor: 'red',
  },
  roundedBlock: {
    height: 15,
    backgroundColor: 'red',
    width: Dimensions.get('window').width,
    borderBottomLeftRadius: Dimensions.get('window').width / 2,
    borderBottomRightRadius: Dimensions.get('window').width / 2,
  }
})

从“React”导入React
从“react native”导入{维度、样式表、视图}
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
)
}
}
const classes=StyleSheet.create({
容器：{
弹性：1，
玛金托普：30，
},
区块：{
身高：135，
背景颜色：“红色”，
},
圆形块：{
身高：15，
背景颜色：“红色”，
宽度：尺寸。获取（'窗口'）。宽度，
borderBottomLeftRadius:Dimensions.get（'window'）。宽度/2，
borderBottomRightRadius:Dimensions.get（'window'）。宽度/2，
}
})

此代码可用于测试

结果如下：

如您所见，边界半径限制为7.5px，即块高度的一半，而不是要求的宽度的一半

---

有没有办法超越这个限制？如果没有，有什么方法可以实现我想要的吗？

您可以使用

ART

from

react native

来绘制您想要绘制的任何内容。一些非官方文件。请检查下面的或代码

import React from 'react';
import { Dimensions, StyleSheet, View, ART } from 'react-native';

const {
  Surface,
  Shape,
  Path,
  RadialGradient,
  Pattern,
  Transform,
  LinearGradient,
} = ART;
const width = Dimensions.get('window').width;
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  getPathRect = () => {
    const x = width;
    const y = 0;
    const radius = 1000;

    return ART.Path()
      .moveTo(x, y)
      .lineTo(x - width, y)
      .lineTo(x - width, y + width / 2)
      .lineTo(x, y + width / 2)
      .close();
  };

  getPathArc = () => {
    const x = width;
    const y = 0;
    const radius = 1000;
    return ART.Path()
      .moveTo(x, y + width / 2)
      .arc(-x, 0, radius, radius)
      .close();
  };

  gradient = () => {
    return new LinearGradient(
      {
        '.01': 'blue', // blue in 1% position
        '1': 'red', // opacity white in 100% position
      },
      '0',
      '0',
      width,
      '0'
    );
  };

  render() {
    return (
      <View style={classes.container}>
        <Surface width={width} height={width}>
          <Shape
            d={this.getPathRect()}
            fill={this.gradient()}
            // stroke="red"
            strokeWidth="1"
            strokeCap="butt"
            strokeJoin="bevel"
          />
          <Shape
            d={this.getPathArc()}
            fill={this.gradient()}
            // stroke="red"
            strokeWidth="1"
            strokeCap="butt"
            strokeJoin="bevel"
          />
        </Surface>
      </View>
    );
  }
}

const classes = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
  },
});

从“React”导入React；
从“react native”导入{维度、样式表、视图、艺术}；
常数{
表面，
形状，
路径
径向梯度，
图案
使改变
线性梯度，
}=艺术；
const width=Dimensions.get（'window'）.width；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
}
getPathRect=（）=>{
常数x=宽度；
常数y=0；
常数半径=1000；
返回艺术路径（）
.moveTo（x，y）
.lineTo（x-宽度，y）
.lineTo（x-宽度，y+宽度/2）
.lineTo（x，y+宽度/2）
.close（）；
};
getPathArc=（）=>{
常数x=宽度；
常数y=0；
常数半径=1000；
返回艺术路径（）
.移动到（x，y+宽度/2）
.arc（-x，0，半径，半径）
.close（）；
};
梯度=（）=>{
返回新的LinearGradient(
{
'.01'：'蓝色'，//蓝色位于1%位置
'1'：'红色'，//不透明度100%位置为白色
},
'0',
'0',
宽度，
'0'
);
};
render（）{
返回(
);
}
}
const classes=StyleSheet.create({
容器：{
弹性：1，
玛金托普：30，
},
});

@pistou刚刚更新了我的答案，添加了渐变色作为填充色。我也这么做了，我计算出了渐变色的参数，并根据需要修改了渐变色。