[英]react native TouchableOpacity, different functions by first and second click
I'm creating a simple text-to-speech function for my react native app.我正在为我的本机反应应用程序创建一个简单的文本到语音 function。 I have a button, when you click it for the first time, it will read the text and play the sound.
我有一个按钮,当你第一次点击它时,它会阅读文本并播放声音。 But I want to make it dynamic.
但我想让它充满活力。 For example: If you click again it should stop, if click again, should play again, etc..... But now, it is only available for playing the sound with any click.
比如:再点一下就停止,再点一下就再播放等等。。。但是现在只支持任意点击播放声音。 Where/how should I execute the stopReadText()?
我应该在哪里/如何执行 stopReadText()? I still don't have any idea about this.
我仍然对此一无所知。 Thanks a lot.
非常感谢。
Here is the code:这是代码:
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>
)
(I am using expo-speech) (我正在使用博览会演讲)
You can do it by taking on a boolean state variable:您可以通过使用 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>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.