React-native Android 添加音效

文章背景

客户提出需求 : 2.PDA提示操作:正常和异常的提示需要更明显的区别(确认错误是否有语或其他提示)

**使用的技术:**使用React-Native 做的Android开发。

实现方法

在React Native中,如果你想要在Android应用中添加声音提示,你可以使用Sound组件。以下是一个简单的例子,演示如何在React Native应用中播放声音提示:

  1. 首先下载音效文件
    音频下载我是在 制片帮素材 免费下载的(需要登录)

并且该文件需要被添加到了项目的\android\app\src\main\res\raw

  1. 接下来,你需要安装react-native-sound库:
csharp 复制代码
npm install react-native-sound --save
  1. 最后,你可以在你的React Native组件中使用Sound来播放声音:
csharp 复制代码
import React, { Component } from 'react';
import { Button } from 'react-native';
import Sound from 'react-native-sound';//1.导入包
 
class SoundExample extends Component {
									//2.创建方法
  playSound = () => {
    // 需要提前将音频文件添加到项目中
    const sound = new Sound('error_sound.mp3', Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('加载音频文件出错:', error);
      } else {
        sound.play((success) => {
          if (success) {
            console.log('成功播放音频');
          } else {
            console.log('播放音频失败');
          }
        });
      }
    });
  }
 
  render() {
    return (
      <Button title="播放声音" onPress={this.playSound} />//3.使用
    );
  }
}
 
export default SoundExample;

此时点击按钮就可以听到声音了

相关推荐
lxysbly1 小时前
n64模拟器安卓版带金手指2026
android
LYFlied2 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
游戏开发爱好者84 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
王码码20354 小时前
Flutter for OpenHarmony 实战之基础组件:第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
黑码哥4 小时前
ViewHolder设计模式深度剖析:iOS开发者掌握Android列表性能优化的实战指南
android·ios·性能优化·跨平台开发·viewholder
亓才孓5 小时前
[JDBC]元数据
android
独行soc5 小时前
2026年渗透测试面试题总结-17(题目+回答)
android·网络·安全·web安全·渗透测试·安全狮
金融RPA机器人丨实在智能5 小时前
Android Studio开发App项目进入AI深水区:实在智能Agent引领无代码交互革命
android·人工智能·ai·android studio
科技块儿5 小时前
利用IP查询在智慧城市交通信号系统中的应用探索
android·tcp/ip·智慧城市
lbb 小魔仙5 小时前
【HarmonyOS实战】OpenHarmony + RN:自定义 useFormik 表单处理
react native·harmonyos