Реагировать на звук родной игры

У меня есть такой компонент, как:

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, я хочу воспроизвести звук. Я погуглил по этому поводу, но не нашел подходящего ответа.

Можно ли как-нибудь воспроизвести звук, когда я нажимаю на что-нибудь? Как я могу это сделать?

Ответы

Ответ 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')
  }
})

Ответ 2

Вы можете попробовать аудио компонент из expo-sdk.

Посмотрите пример здесь.

Работает с 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>
        )
    }
}