14

React Nativeで音を鳴らしたい。

ここでzmxv/react-native-soundを読み込もうとしましたが、私のような初心者として、そのドキュメントは React Native コードでそれを適用する方法を混乱させます。

これを試す前に、イベントで反応するネイティブ再生サウンドを作成し、次のようなコードを作成します。

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
const Sound = require('react-native-sound')


export default class MovieList extends Component {

    handlePress() {
        // Play some sound here
        let hello = new Sound('motorcycle.mp3', Sound.MAIN_BUNDLE, (error) => {
            if (error) {
              console.log(error)
            }
          })

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

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

そして、これは私がオーディオを置く場所です：

MyProject/android/app/src/main/res/raw/motorcycle.mp3

プロジェクトの構造

プロジェクトの構造

では、私のコードの何が問題なのですか?

4

4 に答える 4

13

これによりサウンドがプリロードされ、再生ボタンを押すと再生されます。

export default class MovieList extends Component {
    componentDidMount(){
      this.hello = new Sound('whoosh.mp3', Sound.MAIN_BUNDLE, (error) => {
        if (error) {
          console.log('failed to load the sound', error);
          return;
        }
      });
    }
    
    
    handlePress() {
      this.hello.play((success) => {
        if (!success) {
          console.log('Sound did not play')
        }
      })
    }

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

サウンドのリストからサウンド トラックを再生する場合は、この要点で詳細なコードを確認してください。

于 2018-12-12T07:15:34.753 に答える