如何解决反应原生切换样式
我有一个首先加载音频并播放的按钮,如果单击他,它会根据需要暂停音乐:
const navigation = useNavigation();
const soundObject = new Audio.Sound();
let playandpauseflag = 0;
let loadsoundonceflag = false;
async function loadsound(){
try {
await soundObject.loadAsync(require('./hello.mp3'));
} catch (error) {
alert('error');
}
};
async function loadplayandpausesong(){
//just load sound once
if(loadsoundonceflag){
await loadsound();
loadsoundonceflag = false; //next time will not load the sound,just play
}
if(playandpauseflag == false){
await soundObject.playAsync(); //play
playandpauseflag = true;
}else{ //not false next time (true)
await soundObject.pauseAsync(); //pause
playandpauseflag = false;
}
}
我想根据“播放”或“暂停”更改他的风格。 这就是我渲染样式的方式:
<FontAwesome5
name="play" //if I put "pause" I'll have the 'pause' design that I want when I click to play the button
></FontAwesome5>
我尝试过name = playandpauseflag吗? “ pause”:“ play”,但无法正常工作。这是一种方法,但是它正在使正在加载的应用程序出现问题,我想知道是否可以用另一种方法来完成它。非常感谢!
解决方法
尝试使用useState。例如,
const [playState,setPlayState] = useState('pause');
const onClick = () => {
if (playState === 'play') {
setPlayState('pause');
} else {
setPlayState('play');
}
};
return (
<FontAwesome5 name={playState}></FontAwesome5>
);
,
使用useState存储“ playandpauseflag”的值
const [playandpauseflag,setPlayandpauseflag] = useState(false);
在您的loadplayandpausesong()函数中
async function loadplayandpausesong(){
//just load sound once
if(loadsoundonceflag){
await loadsound();
loadsoundonceflag = false; //next time will not load the sound,just play
}
if(playandpauseflag == false){
await soundObject.playAsync(); //play
setPlayandpauseflag = true; //setState
}else{ //not false next time (true)
await soundObject.pauseAsync(); //pause
setPlayandpauseflag = false; //setState
}
}
在此之后,请按此按钮
<FontAwesome5name={playandpauseflag ? "play" : "pause"}></FontAwesome5>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。