react-native - 使用 Reanimated 2 useSharedValue 和 useAnimatedStyle 的自定义抽屉

Question

我正在尝试使用 react native reanimated 2 来实现上图中的绘图导航。

import React, { useState } from 'react'
import { Text } from 'react-native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import Animated, { useSharedValue, interpolate, useAnimatedStyle } from 'react-native-reanimated'

import Screen1 from '../screens/screen1'
import Screen2 from '../screens/screen2'
import Screen3 from '../screens/screen3'

const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {

const [translateX, setTranslateX] = useState(new Animated.Value(0))
//const translateX = useSharedValue(0)

const scale = Animated.interpolateNode(translateX, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
});

// const animatedStyle = useAnimatedStyle(() => {
//     const scale = interpolate(
//         translateX.value,
//         [0, 1],
//         [1, 0.8]
//     );
//     return{ transform: [{ scale }] }
// })

const animatedStyle = { transform: [{ scale }] };

return (
    <Drawer.Navigator drawerContent={ (props) => {
            setTranslateX(props.progress)
            // translateX.value = props.progress
            return <Text>Hello madan</Text> 
        }} >
        <Drawer.Screen name="screen1">
            {() => <Screen1 style={ animatedStyle } />}
        </Drawer.Screen>
        <Drawer.Screen name="screen2" component={ Screen2 } />
        <Drawer.Screen name="screen3" component={ Screen3 } />
    </Drawer.Navigator>
)
}

我可以通过使用上面的代码来实现它。但是，我正在使用Animated.Value. 我想从 reanimated 2 中使用useSharedValue()和useAnimatedStyle挂钩。我尝试实现可以​​在上面注释的代码中看到的内容。但是，它不起作用。应用程序崩溃并在 JSCRuntime 文件中给出错误。

标签： react-nativereact-native-reanimated-v2