-1
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来分享他们的代码
希望这个问题帮助别人喜欢它与其他真棒问题很快再次帮我 符合能跟大家到那时再见 跟着我处处为更多的真棒东西;） – dimpuW