如何在React Native中为自定义视图实现波浪形状效果？

实现方案 #

你当前使用skew斜切加单组圆角的方式只能生成单一弧形边，无法实现波浪的双层起伏结构，推荐以下两种实现方式：

方案1：使用react-native-svg绘制（推荐，还原度最高）

这种方式可以通过贝塞尔曲线精准还原预期的波浪形状，灵活度最高。

1. 首先安装依赖：

npm install react-native-svg
# 或使用yarn
yarn add react-native-svg

2. 组件代码示例：

import Svg, { Path } from 'react-native-svg';

const WaveView = () => {
  return (
    <Svg width="100%" height="100%" viewBox="0 0 200 100">
      {/* 此处Path参数可根据你需要的波浪弧度、高度调整 */}
      <Path
        d="M0 50 Q 50 0, 100 50 T 200 50 L 200 100 L 0 100 Z"
        fill="blue"
      />
    </Svg>
  );
};

你可以调整d属性里的参数来修改波浪的弧度、宽度、高度，匹配你的设计需求。

方案2：多层圆角View叠加模拟（无需额外依赖）

如果不想引入第三方依赖，可以通过两层带不同圆角的View错位叠加模拟波浪效果，代码示例如下：

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

const WaveView = () => {
  return (
    <View style={styles.container}>
      <View style={styles.wave1} />
      <View style={styles.wave2} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 100,
    overflow: 'hidden',
  },
  wave1: {
    position: 'absolute',
    width: '120%',
    height: 100,
    backgroundColor: 'blue',
    borderTopLeftRadius: 100,
    borderTopRightRadius: 80,
    left: '-10%',
    top: 20,
  },
  wave2: {
    position: 'absolute',
    width: '120%',
    height: 100,
    backgroundColor: 'blue',
    borderBottomLeftRadius: 120,
    borderBottomRightRadius: 100,
    left: '-10%',
    top: -30,
  }
});

这种方式需要根据你需要的波浪尺寸微调圆角值和偏移量，调整成本比SVG方案高。

内容的提问来源于stack exchange，提问作者Xwingoga06