使用反应本机声音不播放声音
问题描述:
Im新的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来分享他们的代码
答
您无法从任何目录加载声音。您必须将目录下的声音片段文件保存在目录android/app/src/main/res/raw中android和ios 打开Xcode并将您的声音文件添加到项目中(右键单击该项目并选择将文件添加到[项目])
您可以在下面的链接找到这个细节文档: -
和theworking例如,对于这一点,你可以在下面的链接查看代码: -
我希望这是你在找什么:)
+0
这是非常有用的三江源我没有注意到这部分:'的Android /应用/ src目录/主/ RES/raw' 我们还需要添加此 '常量btnSound =新声音(” btn_sound.mp3',Sound.MAIN_BUNDLE);' 必须将'Sound.MAIN_BUNDLE'声部添加到声音文件中 – dimpuW
希望这个问题帮助别人喜欢它与其他真棒问题很快再次帮我 符合能跟大家到那时再见 跟着我处处为更多的真棒东西;) – dimpuW