Entonces, exactamente lo que dice el título, estoy creando una aplicación nativa de reacción y quiero que la pantalla que dejo con navigation.navigate() se "restablezca" o "vuelva a renderizar" cuando vuelva a ella, porque tal como está ahora, cuando salgo de la pantalla y vuelvo a ella, su estado es el mismo que lo dejé. Aquí está el código del navegador.
const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Group> <Tab.Screen name="Devices" component={Devices} options={{ tabBarIcon:({focused})=>( <View style={{alignItems:'center', justifyContent:'center'}}> <Image source={require('./android/app/src/main/assets/devices.png')} resizeMode='contain' style={{ width: 30, height: 30 }} /> </View> ) }} /> <Tab.Screen name="Connection" component={ConnectionScreen} options={{ tabBarIcon:({focused})=>( <View style={{alignItems:'center', justifyContent:'center'}}> <Image source={require('./android/app/src/main/assets/connection.png')} resizeMode='contain' style={{ width: 30, height: 30 }} /> </View> ) }} /> </Tab.Group> <Tab.Group screenOptions={{ presentation: 'modal' }}> <Tab.Screen name='Add device' component={AddDevice} options={{ tabBarButton: () => null, tabBarVisible:false }}/> </Tab.Group> </Tab.Navigator> </NavigationContainer> ); }Y la segunda cosa más pequeña es que no puedo ver ninguna animación de navegación, como este Modal en la parte inferior, por ejemplo.
Establecer unmountOnBlur en true
Desmontar una pantalla restablece cualquier estado local en la pantalla, así como el estado de los navegadores anidados en la pantalla. El valor predeterminado es
false.
<Tab.Navigator screenOptions={{ unmountOnBlur: true }} > ... </Tab.Navigator>Además, puedes aplicarlo a una sola ruta:
<Tab.Navigator> <Tab.Screen name="..." component={...} options={{ unmountOnBlur: true }} /> </Tab.Navigator>Puedes hacer uso de useIsFocused , prueba algo como:
import { useIsFocused } from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { //executes whenever this component/screen is focused }, [isFocused]);También puede establecer el indicador unmountOnBlur en verdadero para la pantalla en particular, como se muestra a continuación:
<Tab.Screen name={...} component={...} options={{unmountOnBlur: true}} />