Estoy tratando de lograr esta animación con la navegación reactiva v6 donde la pantalla se reduce cuando se abre el cajón.
Aquí está mi código hasta ahora:
Aplicación.js
<Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} initialRouteName="Home" > <Drawer.Screen name="Home" component={Home} /> <Drawer.Screen name="About" component={About} /> </Drawer.Navigator>Inicio.js
const Home = ({ navigation, setProgress }) => { const progress = useDrawerProgress(); const scale = Animated.interpolateNode(progress.value, { inputRange: [0, 1], outputRange: [1, 0.7], }); ... return ( <Animated.View style={{ flex: 1, transform: [{ scale }] }}> ... </Animated.View> Sin embargo, esto no funciona como se esperaba, transform: scale no cambia en la interfaz de usuario. Si realizo algunos cambios ficticios en Home.js mientras el cajón está abierto, la pantalla de inicio se reduce repentinamente.
Creo que el const progress = useDrawerProgress() no actualiza el progress
Editar: muy similar a esta pregunta aquí
useDrawerProgress actualice el progreso de la apertura del cajón, pero necesitamos una pequeña lógica de reescritura de la animación, intente esto:
import { interpolate, Extrapolate, useAnimatedStyles } from react-native-reanimated; . . . const drawerProgress = useDrawerProgress(); const animatedStyle = useAnimatedStyle(() => { const scale = interpolate(drawerProgress.value, [0, 1], [1, 0.8], { extrapolateRight: Extrapolate.CLAMP, }); const borderRadius = interpolate(drawerProgress.value, [0, 1], [0, 10], { extrapolateRight: Extrapolate.CLAMP, }); return { transform: [{ scale }], borderRadius, }; });