在 React Native 中动态播放音效的专业指南

npm install react-native-sound --save
# 或者使用 yarn
yarn add react-native-sound

react-native link react-native-sound

import React from 'react';
import {
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';
// 导入 react-native-sound 库
var Sound = require('react-native-sound');

// 设置音频类别为播放，确保在后台或锁屏时也能播放
Sound.setCategory('Playback');

function playSound(soundFileName) {
  // 构造完整的音效文件名，例如 'a.mp3'
  const fullFileName = `${soundFileName}.mp3`;

  // 创建 Sound 实例
  // Sound.MAIN_BUNDLE 指示从应用的主捆绑包中加载音效
  var soundInstance = new Sound(fullFileName, Sound.MAIN_BUNDLE, (error) => {
    if (error) {
      console.log(`加载音效 ${fullFileName} 失败`, error);
      return;
    }
    // 音效加载成功
    console.log(
      `音效 ${fullFileName} 加载成功，时长: ${soundInstance.getDuration()} 秒, 声道数: ${soundInstance.getNumberOfChannels()}`
    );

    // 播放音效
    soundInstance.play((success) => {
      if (success) {
        console.log(`音效 ${fullFileName} 播放完成`);
      } else {
        console.log(`音效 ${fullFileName} 播放失败，可能是解码错误`);
      }
      // 播放完成后，务必释放资源，避免内存泄漏
      soundInstance.release();
    });
  });
}

// 示例数据，代表不同的音效
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',
];

function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <FlatList
          data={characters}
          keyExtractor={(item) => item} // 为列表项提供唯一的 key
          renderItem={({ item }) => (
            <View style={styles.itemRow}>
              <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>
          )}
          numColumns={2} // 可以根据需要设置列数
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  itemRow: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    marginVertical: 5,
  },
  button: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    width: 100, // 调整按钮大小
    height: 100,
    backgroundColor: '#fff',
    borderRadius: 50,
    marginHorizontal: 5, // 按钮之间添加间距
  },
  buttonText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;