响应原生 TouchableOpacity，通过第一次和第二次点击实现不同的功能答案

【问题标题】：react native TouchableOpacity, different functions by first and second click响应原生 TouchableOpacity，通过第一次和第二次点击实现不同的功能
【发布时间】：2023-01-16 20:29:31
【问题描述】：

我正在为我的 React 本机应用程序创建一个简单的文本到语音转换功能。我有一个按钮，当你第一次点击它时，它会阅读文本并播放声音。但我想让它充满活力。例如：如果你再次点击它应该停止，如果再次点击它应该再次播放等等...... 但是现在，它只能用于通过单击播放声音。我应该在哪里/如何执行 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>
  )

（我正在使用博览会演讲）

【问题讨论】：

标签： javascript react-native expo text-to-speech touchableopacity

【解决方案1】：

您可以通过使用布尔状态变量来实现：

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(falswe
  }

 }


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

【讨论】：

谢谢你。我尝试了一个类似的但有一个太多的重新渲染错误。但我会再试一次你的
你可以这样做，应该没有问题。