響應原生 TouchableOpacity，通過第一次和第二次點擊實現不同的功能

Question

我正在為我的本機反應應用程序創建一個簡單的文本到語音 function。 我有一個按鈕，當你第一次點擊它時，它會閱讀文本並播放聲音。 但我想讓它充滿活力。 比如：再點一下就停止，再點一下就再播放等等。。。但是現在只支持任意點擊播放聲音。 我應該在哪里/如何執行 stopReadText()？ 我仍然對此一無所知。 非常感謝。

這是代碼：

const readText = () => {
    Speech.speak('text')
  }

const stopReadText = () => {
    Speech.stop()
  }

  return (
    <View>
      <TouchableOpacity onPress=(readText)>
        <Divider style={styles.modalDivider} />
        <Image
          style={styles.speaker}
          source={require('../../assets/speaker.png')}
        />
      </TouchableOpacity>
    </View>
  )

（我正在使用博覽會演講）

Answer 1

您可以通過使用 boolean state 變量來實現：

import { useState } from 'react';

const [isPlay,setIsPlay]=useState(false)

const readText = () => {
    Speech.speak('text')
  }

const stopReadText = () => {
    Speech.stop()
  }

const handlePlay =() =>{
  if(!setIsPlay){
      readText()
      setIsPlay(true)
  }
  else {
      stopReadText()
      setIsPlay(false)
  }

 }


  return (
    <View>
      <TouchableOpacity onPress={handlePlay}>
        <Divider style={styles.modalDivider} />
        <Image
          style={styles.speaker}
          source={require('../../assets/speaker.png')}
        />
      </TouchableOpacity>
    </View>
  )