对事件做出反应原生播放声音答案

【问题标题】：react native play sound on event对事件做出反应原生播放声音
【发布时间】：2016-05-31 04:42:22
【问题描述】：

我有一个类似的组件：

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'


class MovieList extends Component {


    handlePress() {
        // Play some sound here
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View style={styles.movie}>
                    <Text style={styles.name}>{movie.name}</Text>
                    <View style={styles.start}>
                        <Text style={styles.text}>Start</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

在这里，当我触摸view 时，我想播放一些声音。我用谷歌搜索过，但没有找到任何合适的答案

当我按下某个东西时，我是否可以播放声音？我该怎么做？

【问题讨论】：

看看github.com/zmxv/react-native-sound，它完全符合您的需求。

标签： react-native

【解决方案1】：

查看React Native Sound - 一个用于访问设备音频控件的跨平台组件。

你可以这样使用它：

const Sound = require('react-native-sound')

let hello = new Sound('hello.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.log(error)
  }
})

hello.play((success) => {
  if (!success) {
    console.log('Sound did not play')
  }
})

【讨论】：

任何使用这个库 react-native-sound 但带有 url mp3 链接的例子？
您可能还需要声音，否则可能会出错。 github.com/zmxv/react-native-sound/issues/120
如何在按钮按下时播放声音？你能举个例子吗
什么是“MAIN_BUNDLE”。我复制粘贴代码只是替换我的声音文件的名称，但它没有播放...
只是提醒一下，有一个记录在案的错误，除了我自己之外，还有更多的人遇到并且无法解决。 RNSound 正在进行 android 标志检查，我自己和其他正在制作纯 iOS 应用程序的人正在解决问题。

【解决方案2】：

你可以试试expo-sdk的音频组件。

查看示例here。

它适用于 sdk 18。

【讨论】：

【解决方案3】：

您可以像这样使用expo-av 库播放声音。

import { Audio } from "expo-av";
class MovieList extends Component {


   async handlePress() {
     try {
        const { sound: soundObject, status } = await 
           Audio.Sound.createAsync('sound.mp3', { shouldPlay: true });
        await soundObject.playAsync();
        } catch (error) { console.log(error); }
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View style={styles.movie}>
                    <Text style={styles.name}>{movie.name}</Text>
                    <View style={styles.start}>
                        <Text style={styles.text}>Start</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

【讨论】：