Question

我当前正在使用最新的react-navigation-v3。我尝试了这个solution。但这对我没有用。

这是我尝试从链接中的解决方案复制的过渡。

const Transition = (index, position) => {
    const inputRange = [index - 1, index, index + 1];
    const opacity = position.interpolate({
        inputRange,
        outputRange: [.8, 1, 1],
    });

    const scaleY = position.interpolate({
        inputRange,
        outputRange: ([0.8, 1, 1]),
    });

    return {
        opacity,
        transform: [
            {scaleY}
        ]
    };
};

这是我声明的transitionConfig。

const TransitionConfiguration = () => {
    return {
        // Define scene interpolation, eq. custom transition
        screenInterpolator: (sceneProps) => {

            const {position, scene} = sceneProps;
            const {index, route} = scene
            const params = route.params || {}; // <- That's new
            const transition = params.transition || 'default'; // <- That's new

            return {
                transition: Transition(index, position),
                default: Transition(index, position),
            }[transition];
        }
    }
};

这是路线的所有列表：

const UnauthenticatedScreens = createStackNavigator(
    { // Screens
        Login: { screen: Login }
    }
);


const AuthenticatedInitialScreens = createStackNavigator(
    { // Screens
        Home: {
            screen: Home
        },
    }, { // Default options
        defaultNavigationOptions: ({ navigation }) => {
            return {
                header:
                    <DrawerHeader // Default header component
                        headerTitle={navigation.state.routeName}
                        icon="menu"
                        onPress={() => navigation.openDrawer()}
                    />
            };
        }
    }
);

const AppDrawerNavigator = createDrawerNavigator(
    { // Screens
        Home: AuthenticatedInitialScreens,
    }, { // Default options
        initialRouteName: 'Home',
        contentComponent: DrawerComponent, // Default drawer component
        contentOptions: {
            activeTintColor: COLOR.PANTOME
        }
    }
);

const AppSwitchNavigator = createSwitchNavigator(
    { // Screens
        Splash: { screen: Splash },
        UnauthenticatedScreens: { screen: UnauthenticatedScreens },
        AuthenticatedInitialScreens: { screen: AppDrawerNavigator }
    }, { // Default options
        initialRouteName: 'Splash',
        transitionConfig: TransitionConfiguration
    }
);

const AppContainer = createAppContainer(AppSwitchNavigator);

export default AppContainer

以及我的 Splash 组件中的componentDidMount方法。

componentDidMount() {
        this.props.actions.restoreSession();
        setTimeout(() => {
            this.props.state.isAuth
                ? this.props.navigation.navigate({
                    params: {
                        transition: 'transition'
                    }
                })
                : this.props.navigation.navigate({
                    routeName: 'UnauthenticatedScreens',
                    params: {
                        transition: 'transition'
                    }
                })
        }, 2000);
    }

感谢是否有人可以提供帮助。预先感谢。

Answer 1

我能够通过执行一些条件逻辑来完成此任务，我们在react-navigation 3.3.2上。也是

您必须从Easing导入Animated和react-native，然后可以按名称或按索引（以下按名称）有条件地渲染特定屏幕的过渡。 / p>

通过在导航器的外部声明配置，并用transitionSpec切换{}，它将仅在该特定屏幕上触发-与{{1 }}。

screenInterpolator至Screen1拥有动画，但是其他屏幕均没有该动画。

Screen2

当转到另一个页面时，React Navigation V3处理过渡和动画

1 个答案: