Tengo un verdadero doozy aquí y no puedo entenderlo.
tengo este componente:
<TouchableOpacity onPress={() => { if (myContext.value) { alert('true'); //changes myContext.value to false } else { alert('false'); //changes myContext.value to true } }}> <Text>{myContext.value ? 'working' : 'not working'}</Text> </TouchableOpacity>Lo extraño que no entiendo es que el contexto ESTÁ cambiando la función onPress. Entonces, si hago clic en el botón, alertará verdadero al principio y luego falso y de ida y vuelta como se esperaba. Lo que no cambia es el texto que debería ir entre "funcionando" y "no funcionando".
Este componente definitivamente está dentro del alcance de mi proveedor. Estoy usando useContext para obtener acceso a myContext .
¿Alguien sabe por qué esto podría estar sucediendo?
El punto a tener en cuenta aquí es que simplemente cambiar myContext.value = false or true no activará una nueva representación.
No estoy seguro de cómo estás manejando el cambio de value , pero he creado una réplica de lo que quieres.
Echa un vistazo a este Snack para ver el ejemplo de trabajo.
Cree un contexto como se muestra a continuación
import { createContext } from 'react'; const MyContext = createContext(); export default MyContext;Un componente App.js de ejemplo se vería así
import * as React from 'react'; import { Text, View, TouchableOpacity } from 'react-native'; import Constants from 'expo-constants'; import MyContext from './MyContext'; import MyComponent from './MyComponent'; export default function App() { const [value, setValue] = React.useState(true); return ( <MyContext.Provider value={{ value, setValue }}> <MyComponent /> </MyContext.Provider> ); }Y su componente donde desea realizar esta operación debería verse así
import * as React from 'react'; import { Text, View, StyleSheet, TouchableOpacity } from 'react-native'; import Constants from 'expo-constants'; import MyContext from './MyContext'; export default function MyComponent() { const myContext = React.useContext(MyContext); return ( <TouchableOpacity onPress={() => { if (myContext.value) { alert('true'); myContext.setValue(false); //changes myContext.value to false } else { alert('false'); myContext.setValue(true); //changes myContext.value to true } }}> <Text>{myContext.value ? 'working' : 'not working'}</Text> </TouchableOpacity> ); }