0

我是 react-native 的新手，我正在构建一个应用程序来在按钮按下时播放声音，但我无法实现这一点，是因为我的代码中的错误吗？还请建议播放声音的解决方案并建议更正

这是我的代码：

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;

这可能不是使用 react-native-sound 的正确方法，因为我找不到示例，如果有人也使用 react-native-sound 分享他们的代码会更好

4

1 回答 1

4

您无法从任何目录加载声音。您必须将声音剪辑文件保存在android/app/src/main/res/raw目录下，用于android和 ios打开 Xcode 并将声音文件添加到项目中（右键单击项目并选择 Add Files to [PROJECTNAME ])

您可以在下面的链接中找到详细文档：-

基本用法

对于此工作示例，您可以检查以下链接中的代码：-

示例演示

我希望这就是你要找的:)

于 2017-08-30T06:30:13.093 回答