react-native - 具有锐利边缘的 React Native 样式视图

Question

我怎样才能让我的视图看起来像这样，（Karamel 下方的锐边为红色）

Answer 1

你应该使用react-native-canvas它。

这是我以前使用画布的代码，因此您可以参考它。

import Canvas from 'react-native-canvas';

  handleHeader(canvas, color) {
    if (canvas) {
      const height = 230;
      console.log(width, height);
      canvas.width = width;
      canvas.height = height;

      const context = canvas.getContext('2d');

      context.fillStyle = color;
      context.moveTo(0, 0);
      context.lineTo(0, height - 40);
      context.quadraticCurveTo(width / 4, height - 80, width / 2, height - 40);
      context.quadraticCurveTo((width / 4) * 3, height, width, height - 40);
      context.lineTo(width, 0);
      context.fill();
    }
  }

  render() {
    return (
      <Canvas ref={canvas => this.handleHeader(canvas, this.props.color)} />
    );
  }