React Navigation V3处理过渡和动画到另一页时

Question

我当前正在使用React-Navigation-V3，这是最新的。我尝试了这个解决方案。但这对我没有用。

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

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。也

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

通过声明config 外部导航器，然后用{}切换transitionSpec，它只会在该特定屏幕上触发 - 与screenInterpolator的条件相同。

Screen1 to Screen2具有动画，但其他屏幕都没有动画。

const screen2Config = {
  duration: 300,
  easing: Easing.out(Easing.poly(4)),
  timing: Animated.timing,
};
export const ScreenStack = createStackNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      headerTitle: 'Screen1',
      headerTitleAllowFontScaling: false,
    }),
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      headerTitle: 'Screen2',
      headerTitleAllowFontScaling: false,
      tabBarVisible: false,
    }),
  },
  Screen3: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      headerTitle: 'Screen3',
      headerTitleAllowFontScaling: false,
    }),
  },
  Screen4: {
    screen: Screen4,
    navigationOptions: ({ navigation }) => ({
      headerTitle: 'Screen4',
      headerTitleAllowFontScaling: false,
    }),
  },
}, {
  headerMode: 'float',
  mode: 'modal',
  transitionConfig: sceneProps => ({
    transitionSpec: sceneProps.scene.route.routeName === 'Screen2' ? screen2Config : {},
    screenInterpolator: (sceneProps) => {
      if (sceneProps.scene.route.routeName === 'Screen2') {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;
        const width = layout.initWidth;
        const translateX = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [width, 0, 0],
        });
        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        });
        return { opacity, transform: [{ translateX }] };
      }
    },
  }),
});