React Native 动态音效播放指南：实现点击播放对应声音

import React from 'react';
import {
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Alert, // 用于更好的用户错误提示
} from 'react-native';

var Sound = require('react-native-sound');

// 定义需要播放的字符列表，每个字符对应一个音频文件
var 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');

/**
 * 播放指定名称的音效
 * @param {string} soundName 要播放的音效文件名（不带扩展名）
 */
function playSound(soundName: string) {
  // 构造完整的音频文件路径，假设文件名为 soundName.mp3
  // Sound.MAIN_BUNDLE 指示音频文件位于应用的主资源包中
  var sound = new Sound(`${soundName}.mp3`, Sound.MAIN_BUNDLE, (error) => {
    if (error) {
      console.log(`Failed to load the sound '${soundName}.mp3'`, error);
      Alert.alert('播放失败', `无法加载音效: ${soundName}.mp3，请检查文件是否存在于原生资源目录。`);
      return;
    }
    // 音效加载成功
    console.log(
      `Sound loaded: ${soundName}.mp3, duration: ${sound.getDuration()}s, channels: ${sound.getNumberOfChannels()}`
    );

    // 播放音效
    sound.play((success) => {
      if (success) {
        console.log(`Successfully finished playing ${soundName}.mp3`);
      } else {
        console.log(`Playback failed for ${soundName}.mp3 due to audio decoding errors`);
        Alert.alert('播放失败', `音效播放出错: ${soundName}.mp3`);
      }
      // 播放结束后释放资源，避免内存泄漏。
      // 对于短音效，通常在播放结束后立即释放。
      sound.release();
    });
  });
}

function App() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <FlatList
          data={characters}
          keyExtractor={(item) => item} // 为FlatList提供唯一的key
          numColumns={4} // 每行显示4个按钮
          contentContainerStyle={styles.listContent}
          renderItem={({ item }) => (
            <View style={styles.itemWrapper}>
              <TouchableOpacity onPress={() => playSound(item)} style={styles.button}>
                <Text style={styles.buttonText}>
                  {item.toUpperCase()}
                </Text>
              </TouchableOpacity>
            </View>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  container: {
    flex: 1,
    padding: 10,
  },
  listContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemWrapper: {
    padding: 5, // 调整按钮之间的间距
  },
  button: {
    borderWidth: 1,
    borderColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center',
    width: 70, // 调整按钮大小
    height: 70,
    backgroundColor: '#fff',
    borderRadius: 35, // 使按钮更圆
    elevation: 3, // Android 阴影
    shadowColor: '#000', // iOS 阴影
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 1.5,
  },
  buttonText: {
    fontSize: 20,
    color: '#333',
    fontWeight: 'bold',
  },
});

export default App;