Estoy creando una aplicación que tiene 3 páginas principales usando navegación nativa reactiva:
Pantalla de inicio, Historikk y Kjøring
La pantalla llamada Pantalla de inicio es la pila inferior y las demás están apiladas en la parte superior.
En mi página llamada "Kjøring" tengo un botón que funciona como un botón de inicio y parada, usando un condicional para decidir qué se muestra para el usuario y qué función onClick debe usarse.
<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>Mi problema es que cuando presiono el botón de inicio y vuelvo a la pila inferior (pantalla de inicio), y luego vuelvo a la página: "Kjøring". El botón muestra el botón Iniciar, en lugar del botón Detener porque mi estado se ha restablecido.
Luego intenté crear el estado en la pantalla de inicio y enviar el estado a la pantalla "Kjøring", y pude enviar el estado actual desde la pantalla de inicio a la pantalla "Kjøring" usando:
const [started, setStarted] = useState(true); onPress={() => {navigation.navigate("Kjøring",{started: started})}}Podría haber intentado enviar el estado actual de la misma manera, pero estoy usando el encabezado predeterminado y el botón Atrás de la navegación de pila nativa reactiva v6, por lo que no tengo forma de enviarlo cuando regrese sin volver a crear el encabezado.
No puedo averiguar cómo enviar la función setState a la pantalla "Kjøring".
Yo he tratado:
Creo que DeviceEventEmitter debería funcionar en tu caso
en la página de inicio agregar un oyente
useEffect(() => { DeviceEventEmitter.addListener('event.testEvent', eventData => {//action that need to be performed}); return () => {}; }, []);En la Página donde ocurre el evento emite el siguiente código:
DeviceEventEmitter.emit('event.testEvent', true);También elimine el oyente al salir de la página agregando el siguiente código:
useEffect(() => { return () => { DeviceEventEmitter.removeAllListeners('event.testEvent'); }; }, []);