反応ネイティブサウンドを使用してサウンドが再生されない

Question

Im-newに反応してネイティブにして、ボタンを押してサウンドを再生するアプリケーションをビルドすると、これは達成できませんでした。また、PLSのサウンドを再生するためのソリューションを提案し、修正に

を示唆してここに私のコードです：

import React, { Component } from 'react'; 
 
import { StatusBar, Dimensions, Image, TouchableWithoutFeedback, Animated } from 'react-native'; 
 
import { Actions } from 'react-native-router-flux'; 
 
import Sound from 'react-native-sound'; 
 

 
const a = require('./Images/landing-bnt1-on.png'); 
 
const b = require('./Images/landing-bnt1.png'); 
 
const c = require('./Images/landing-bnt2-on.png'); 
 
const d = require('./Images/landing-bnt2.png'); 
 

 
const btnSound = new Sound('./Sounds/btn_sound.mp3'); 
 

 
const w = Dimensions.get('window').width; 
 
const h = Dimensions.get('window').height; 
 

 
class MainScreen extends Component { 
 
    state = { 
 
    computerPressed: false, 
 
    teamPressed: false 
 
    } 
 

 
    componentWillMount() { 
 
     this.slide1 = new Animated.Value(0); 
 
     this.slide2 = new Animated.Value(0); 
 
    this.bnt1(); 
 
    this.bnt2(); 
 
} 
 
bnt1() { 
 
     Animated.timing(
 
     this.slide1, { 
 
      delay: 100, 
 
     toValue: w/1.161, 
 
     duration: 300, 
 
     } 
 
     ).start(); 
 
    } 
 

 
bnt2() { 
 
      Animated.timing(
 
      this.slide2, { 
 
      delay: 300, 
 
      toValue: w/1.161, 
 
      duration: 300, 
 
      } 
 
      ).start(); 
 
     } 
 
render() { 
 
return (
 
    <Image 
 
    source={require('./Images/bg_img.png')} 
 
    style={styles.backgroundStyle} > 
 

 
    <StatusBar hidden /> 
 

 
    <Image 
 
    source={require('./Images/History.png')} 
 
    style={styles.historybuttonStyle} /> 
 

 
    <Image 
 
    source={require('./Images/logo_ws.png')} 
 
    style={styles.logoStyle} /> 
 

 
<TouchableWithoutFeedback 
 
onPress={() => { 
 
    btnSound.play(); 
 
    Actions.screen2({ challenge: 'Computer' }); 
 
    } 
 
} 
 
onPressIn={() => { 
 
    this.setState({ computerPressed: true }); 
 
    } 
 
} 
 
onPressOut={() => { 
 
    this.setState({ computerPressed: false }); 
 
} 
 
} > 
 
    <Animated.Image 
 
    source={this.state.computerPressed ? a : b} 
 
    style={[styles.landingbnt1Style, { transform: [{ translateX: this.slide1 }] }]} /> 
 

 
</TouchableWithoutFeedback> 
 

 
<TouchableWithoutFeedback 
 
onPress={() => { 
 
    Actions.screen2({ challenge: 'Team' }); 
 
    } 
 
} 
 
onPressIn={() => { 
 
    this.setState({ teamPressed: true }); 
 
    } 
 
} 
 
onPressOut={() => { 
 
    this.setState({ teamPressed: false }); 
 
} 
 
} > 
 
    <Animated.Image 
 
    source={this.state.teamPressed ? c : d} 
 
    style={[styles.landingbnt2Style, { transform: [{ translateX: this.slide2 }] }]} /> 
 
</TouchableWithoutFeedback> 
 

 
</Image> 
 
); 
 
} 
 
} 
 
const styles = { 
 

 
backgroundStyle: { 
 
    flex: 1, 
 
    width: w, 
 
    height: h, 
 
    flexWrap: 'wrap', 
 
    position: 'relative' 
 
    }, 
 
    logoStyle: { 
 
    width: w, 
 
    height: h, 
 
    resizeMode: 'contain', 
 
    position: 'absolute', 
 
    bottom: h/15 
 
    }, 
 
    historybuttonStyle: { 
 
    width: w/7.5, 
 
    height: h/14, 
 
    right: (w/20), 
 
    top: (h/40), 
 
    position: 'absolute' 
 
    }, 
 
    landingbnt1Style: { 
 
    width: w/1.44, 
 
    height: h/13.14, 
 
    top: h/1.41, 
 
    left: -(w/1.44) 
 
    }, 
 
    landingbnt2Style: { 
 
    width: w/1.44, 
 
    height: h/13.14, 
 
    top: h/1.35, 
 
    left: -(w/1.44) 
 
    } 
 
}; 
 
export default MainScreen;

は、それはそれを反応させ、ネイティブ音れる使用の正しい方法ではないかもしれません私はそれが良いと思う例を見つけることができなかったので、誰かが反応したネイティブサウンドを使ってコードを共有します。

Answer 1

どのディレクトリからもサウンドを読み込むことはできません。サウンドクリップファイルをアンドロイド/ app/src/main/res/rawのとandroid、そしてios ディレクトリに保存する必要があります。プロジェクトを右クリックして、プロジェクトにサウンドファイルを追加します。

Basic Usage

し、このために例をtheworkingために、あなたは下のリンクでコードを確認することができます： - ：あなたは下のリンクでは、このための詳細なドキュメントを見つけることができます

）[PROJECTNAME]にファイルを追加 -

Example demo

私は、これはあなたがして は私に従うさよならまで、それは私に別の素晴らしい質問とすぐに再び 会うuのみんなを助けたように、この質問が誰かを助けたこと:)