反应本机切换样式答案

【问题标题】：React Native Toggle Style反应本机切换样式
【发布时间】：2021-01-03 17:13:56
【问题描述】：

我有一个按钮，它首先加载音频并播放，如果我点击他，它会根据需要暂停音乐：

    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 吗？ “暂停”：“播放”，但它不能正常工作。这是一种方式，但它正在干扰我的加载应用程序，我想知道我是否可以通过另一种方式来做到这一点。非常感谢！

【问题讨论】：

标签： react-native button audio styles expo

【解决方案1】：

尝试使用useState。例如，

const [playState, setPlayState] = useState('pause');

const onClick = () => {
    if (playState === 'play') {
      setPlayState('pause');
    } else {
      setPlayState('play');
    }
};

return (
    <FontAwesome5 name={playState}></FontAwesome5>
);

【讨论】：

非常感谢您的回答。我会尝试回来提供反馈。

【解决方案2】：

使用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>

【讨论】：