模板版本：v0.2.2

[!TIP] Gitee 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@ohmi/react-native-waveview Releases 。对于未发布到 npm 的旧版本，请参考安装指南安装 tgz 包。

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

npm

npm install @ohmi/react-native-waveview

yarn

yarn add @ohmi/react-native-waveview

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

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

<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 文档进行引入。

属性

[!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) ，请自由地享受和参与开源。