如何在react本机导航中从另一个屏幕运行setState函数

Question

我正在创建一个应用程序，该应用程序使用react原生导航有3个主页：

主屏幕，Historikk，和Kjøring

名为Homescreen的屏幕是底部堆栈，其他屏幕则堆叠在顶部。

在我的名为"；Kjøring"；我有一个按钮，它的功能是启动和停止按钮，使用条件来决定为用户显示什么，以及应该使用什么onClick功能。

<View>
{!start?
//START KNAPP
<View style={styles.startContainer}>
<TouchableOpacity onPress={handleStart} style={styles.startButton}>
<Image style={styles.playImage} source={require("../Images/Play.png")} />
</TouchableOpacity>
<Text style={styles.startContainerText}>Start</Text>
</View>
:
//STOPP KNAPP
<View style={styles.startContainer}>
<TouchableOpacity onPress={handleStop} style={styles.startButton}>
<Image style={styles.playImage} source={require("../Images/Stop.png")} />
</TouchableOpacity>
<Text style={styles.startContainerText}>Stopp</Text>
</View>
}
</View>

我的问题是，当我按下开始按钮并导航回底部堆栈(主屏幕(，然后返回页面："；Kjøring"；。该按钮显示的是"开始"按钮，而不是"停止"按钮，因为我的状态已重置。

然后我尝试在主屏幕中创建状态，并将该状态发送到"；Kjøring"；屏幕，并且我可以将当前状态从主屏幕发送到"；Kjøring"；屏幕使用：

const [started, setStarted] = useState(true);
onPress={() => {navigation.navigate("Kjøring",{started: started})}}

我本可以尝试以同样的方式发送当前状态，但我使用的是react native stack navigation v6的默认标头和返回按钮，所以当我返回时，如果不重新创建标头，我就无法发送它。

我找不到如何将setState函数发送到"；Kjøring"；屏幕

我试过：

• 创建一个函数并将其作为道具发送，就像我对启动状态所做的那样
• 将setState本身作为道具传递
• 传递一个箭头函数来设置更改

Answer 1

我认为DeviceEventEmitter应该适用于

在主页中添加侦听器

useEffect(() => {
DeviceEventEmitter.addListener('event.testEvent', eventData => {//action that need to be performed});
return () => {};   }, []);

在事件发生的页面中发出以下代码：

DeviceEventEmitter.emit('event.testEvent', true);

此外，通过添加以下代码，在退出页面时删除侦听器：

useEffect(() => {

return () => {
DeviceEventEmitter.removeAllListeners('event.testEvent');
};

}, []);