React Native中实现点击对应按钮播放指定音效的方法

问题背景 #

需要实现点击字母按钮（大写/小写）时播放对应字母的音效，已将a.mp3、b.mp3等音效文件放置在android/app/src/main/res/raw目录，且已安装react-native-sound库。

现有代码问题修正 #

以下是调整后的完整实现代码，解决了Android路径适配、播放时机、资源管理等问题：

import React, { useEffect, useState } from 'react';
import {
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Platform
} from 'react-native';

const Sound = require('react-native-sound');
const characters = [
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
  'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
  'u', 'v', 'w', 'x', 'y', 'z'
];

// 设置音频类别，确保播放不受系统静音影响
Sound.setCategory('Playback');

function App() {
  // 预加载所有音效，存储到state中
  const [soundMap, setSoundMap] = useState({});

  useEffect(() => {
    const loadedSounds = {};
    characters.forEach(char => {
      // Android端加载res/raw下的文件用Sound.RAW，iOS用Sound.MAIN_BUNDLE
      const sound = new Sound(`${char}.mp3`, Platform.OS === 'android' ? Sound.RAW : Sound.MAIN_BUNDLE, (error) => {
        if (error) {
          console.error(`加载${char}音效失败:`, error);
          return;
        }
        console.log(`${char}音效加载完成，时长: ${sound.getDuration()}秒`);
      });
      loadedSounds[char] = sound;
    });

    setSoundMap(loadedSounds);

    // 组件卸载时释放所有音效资源
    return () => {
      Object.values(soundMap).forEach(sound => {
        sound.release();
      });
    };
  }, []);

  const playSound = (char) => {
    const sound = soundMap[char];
    if (!sound) {
      console.error(`${char}音效未加载`);
      return;
    }
    // 重置播放位置到开头，避免重复点击时从上次暂停处播放
    sound.setCurrentTime(0);
    sound.play((success) => {
      if (!success) {
        console.error(`${char}音效播放失败`);
      }
    });
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <FlatList
        data={characters}
        renderItem={({ item }) => (
          <View style={styles.buttonRow}>
            <TouchableOpacity
              onPress={() => playSound(item)}
              style={styles.button}
            >
              <Text style={styles.buttonText}>{item.toUpperCase()}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => playSound(item)}
              style={styles.button}
            >
              <Text style={styles.buttonText}>{item}</Text>
            </TouchableOpacity>
          </View>
        )}
        keyExtractor={(item) => item}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    paddingVertical: 20,
  },
  buttonRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginVertical: 8,
  },
  button: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    width: 80,
    height: 80,
    backgroundColor: '#fff',
    borderRadius: 40,
    marginHorizontal: 10,
  },
  buttonText: {
    fontSize: 24,
    fontWeight: '500',
  },
});

export default App;

关键修改说明 #

• Android路径适配：针对Android平台，加载res/raw目录下的音效时使用Sound.RAW作为目录参数，iOS仍使用Sound.MAIN_BUNDLE
• 预加载与资源释放：组件挂载时预加载所有音效，卸载时调用release()释放资源，避免内存泄漏
• 播放逻辑优化：每次播放前重置音频到开头，确保重复点击时从头播放；仅在音效加载完成后触发播放
• 交互补全：给原代码中无点击逻辑的小写字母按钮添加了音效播放事件

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