使 border-radius 大于高度的一半

Question

我想制作一个 "rounded bottom" 组件，而不使用 ImageBackground，如下所示：

我尝试使用<LinearGradient/>的组合，但是为了简化这道题的代码，我使用了<View/>。

这是我的代码：

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,
  }
})

此代码可用于 Expo Snack

上的测试目的

结果如下：

如你所见，borderRadius限制到7.5px，也就是块高度的一半，而不是宽度的一半按要求。

有没有办法超越这个限制？如果没有，有没有办法实现我想要的？

Answer 1

你可以使用react-native中的ART来画你想画的任何东西。一些非官方文档 https://github.com/react-native-china/react-native-ART-doc/blob/master/doc.md. Please check the Expo Snack 或下面的代码。

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

使 border-radius 大于高度的一半

Make border-radius greater than half of height

border

react-native