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

Question

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

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

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

Answer 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')
  }
})

Answer 2

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

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

Работает с SDK 18.

Answer 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>
        )
    }
}