en mi aplicación nativa de reacción tengo una navegación de pestañas inferiores, agregué un oyente tabPress a una de las pantallas pero por alguna razón ahora todas las pantallas no funcionan, no puedo navegar a una pantalla diferente cuando toco los íconos. ..
El objetivo era bloquear una pantalla según el día, pero ahora TODAS las pantallas están bloqueadas por algún motivo y no puedo navegar a NINGUNA pantalla.
<Tab.Navigator /* options here... */> <Tab.Screen name="Descubre" component={STACK1} /> <Tab.Screen name="Favoritos" component={STACK2} listeners={{ tabPress: (e) => { if(root.mapStore.isoWeekDay == 6) { e.preventDefault(); } }, }} /> <Tab.Screen name="Pedidos" component={STACK3} /> <Tab.Screen name="Más" component={STACK4}/> </Tab.Navigator>Supongo que este es el comportamiento predeterminado establecido por React Native para este evento, consulte la sección Escuchar eventos
Si solo quieres bloquear una de las pantallas en este punto, puedes hacer lo siguiente:
<Tab.Navigator> <Tab.Screen name="Screen 1" /> <Tab.Screen name="Screen 2" options={{ tabBarButton: disabled ? DisabledTabBarButton : EnabledTabBarButton, }} /> </Tab.Navigator>Donde DisabledTabBarButton es:
const DisabledTabBarButton = ({ style, ...props }: BottomTabBarButtonProps) => ( <Pressable disabled style={[{ opacity: 0.2 }, style]} {...props} /> )Y habilitado uno:
const EnabledTabBarButton = ({ style, ...props }: BottomTabBarButtonProps) => ( <Pressable style={[{ opacity: 1 }, style]} {...props} /> )Además, puede hacer lo siguiente mientras crea su navegador de pestañas:
const TabNavigator = createBottomTabNavigator({ First:{ screen: First, }, Second:{ screen: Second, }, Third:{ screen: Third, } }, defaultNavigationOptions: ({ navigation }) => ({ tabBarOnPress: ({ navigation, defaultHandler }) => { if ( navigation.state.routeName === "Route disabled" ) { return null; } defaultHandler(); },})