# react-native-waveview

**Repository Path**: harmonytsc_rn/react-native-waveview

## Basic Information

- **Project Name**: react-native-waveview
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-20
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>@ohmi/react-native-waveview</code> </h1>
</p>
<p align="center">
    <a href="https://gitee.com/kunyuan-hongke/react-native-waveview">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://gitee.com/kunyuan-hongke/react-native-waveview/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

> [!TIP] [Gitee 地址](https://gitee.com/kunyuan-hongke/react-native-waveview)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-waveview Releases](https://gitee.com/kunyuan-hongke/react-native-waveview/release) 。对于未发布到 npm 的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/tree/master/zh-cn/tgz-usage.md)安装 tgz 包。

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### **npm**

```bash
npm install @ohmi/react-native-waveview
```

#### **yarn**

```bash
yarn add @ohmi/react-native-waveview
```

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```JSX
<View style={_styles.container} >
    <TouchableHighlight onPress={()=>{
        // Stop Animation
        this._waveRect && this._waveRect.stopAnim();

        // set water baseline height
        this._waveRect && this._waveRect.setWaterHeight(70);

        // reset wave effect
        this._waveRect && this._waveRect.setWaveParams([
            {A: 10, T: 180, fill: '#FF9F2E'},
            {A: 15, T: 140, fill: '#F08200'},
            {A: 20, T: 100, fill: '#B36100'},
        ]);
    }}>
    <Wave
        ref={ref=>this._waveRect = ref}
        style={_styles.wave}
        H={30}
        waveParams={[
            {A: 10, T: 180, fill: '#62c2ff'},
            {A: 15, T: 140, fill: '#0087dc'},
            {A: 20, T: 100, fill: '#1aa7ff'},
        ]}
        animated={true}
    />
    </TouchableHighlight>
</View>
```

```
<View style={_styles.container} >
    <Wave
        style={_styles.waveBall}
        H={70}
        waveParams={[
            {A: 10, T: 180, fill: '#62c2ff'},
            {A: 15, T: 140, fill: '#0087dc'},
            {A: 20, T: 100, fill: '#1aa7ff'},
        ]}
        animated={true}
    />
</View>
```

```
const _styles = StyleSheet.create({
    container: {
        flex: 1,
        marginVertical: 10,
        marginHorizontal: 20,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: StyleSheet.hairlineWidth,
    },
    wave: {
        width: 100,
        aspectRatio: 1,
        overflow: 'hidden',
        backgroundColor: 'white',
    },
    waveBall: {
        width: 100,
        aspectRatio: 1,
        borderRadius: 50,
        overflow: 'hidden',
    }
});
```

## Link

本库依赖 `@ohmi/react-native-webview` ，如已在鸿蒙工程中引入过该库，则无需再次引入。

如未引入请参照[@ohmi/react-native-webview 文档](https://gitee.com/kunyuan-hongke/ohos-react-native-webview/blob/master/README.md)进行引入。

## 属性

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

### Props

| Name                 | Description                              | default     | Type   | Required | Platform | HarmonyOS Support |
| -------------------- | ---------------------------------------- | ----------- | ------ | -------- | -------- | ----------------- |
| H                    | 基线高度                                 | 400         | Number | yes      | all      | yes               |
| animated             | 显示的动画                               | auto        | bool   | no       | all      | yes               |
| waveParams           | [{ A, T, fill}, ...]                     | null        | Array  | no       | all      | yes               |
| easing               | 来自 ReactNative#Easing 的缓动函数名称   | transparent | string | no       | all      | yes               |
| speed                | 一个波周期的基准持续时间（以毫秒为单位） | ---         | number | no       | all      | yes               |
| speedIncreasePerWave | 每波速度增加（毫秒）                     | null        | number | no       | all      | yes               |

### Method

| Name                      | Description              | Params | Required | Platform | HarmonyOS Support |
| ------------------------- | ------------------------ | ------ | -------- | -------- | ----------------- |
| setWaveParams(waveParams) | 设置波形参数（波形参数） | null   | no       | all      | yes               |
| setWaterHeight(H)         | 设置水波纹高（H）        | null   | no       | all      | yes               |
| startAnim                 | 开始动画.                | null   | no       | all      | yes               |
| stopAnim                  | 停止动画.                | null   | no       | all      | yes               |

## 遗留问题

## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://gitee.com/kunyuan-hongke/react-native-waveview/blob/master/LICENSE) ，请自由地享受和参与开源。