0

我正在使用版本 6 文档中的示例 https://reactnavigation.org/docs/stack-navigator/#animation-related-options

并且 forSide 动画的示例不起作用

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator, DrawerContentScrollView } from '@react-navigation/drawer';

...

const forSlide = ({ current, next, inverted, layouts: { screen } }) => {
    console.log('forSlide');
    const progress = Animated.add(
        current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp',
        }),
        next
            ? next.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 1],
                extrapolate: 'clamp',
            })
            : 0
    );

    return {
        cardStyle: {
            transform: [
                {
                    translateX: Animated.multiply(
                        progress.interpolate({
                            inputRange: [0, 1, 2],
                            outputRange: [
                                screen.width, // Focused, but offscreen in the beginning
                                0, // Fully focused
                                screen.width * -0.3, // Fully unfocused
                            ],
                            extrapolate: 'clamp',
                        }),
                        inverted
                    ),
                },
            ],
        },
    };
};

...

function Root() {
    return (
        <Stack.Navigator initialRouteName="Catalog" screenOptions={{ headerShown: false, cardStyleInterpolator: forSlide }}>
            <Stack.Screen options={{ cardStyleInterpolator: forSlide }} name="Catalog" component={Catalog} />
            <Stack.Screen options={{ cardStyleInterpolator: forSlide }} name="Favourite" component={Favourite} />
        </Stack.Navigator>
    );
}

安装了最新版本的库

    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react-native-reanimated": "^2.2.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.0",
    "react-native-gesture-handler": "^2.0.0",

在 stack-navigation 网站上，他们建议您不要使用 @react-navigation/stack 和 react-navigation/nativestack

这就是它不起作用的原因吗？

4

0 回答 0