React 导航中的弹出动画

Question

我正在使用cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS 进行动画转换，问题是pop 的动画必须与push 的相反，但push 和pop 的动画不是相同的，屏幕转换的方式相同。

如何更改弹出动画，过渡动画与弹出相反？？

我尝试在包含 topbar 但不起作用的堆栈中使用它：

<Stack.Navigator
  screenOptions={{
    ...TransitionPresets.SlideFromRightIOS,
  }}
  mode="card"
  headerMode="screen"
>
  <Stack.Screen
    name="HOME"
    component={HomeStack}
    options={{
      ...TransitionPresets.SlideFromRightIOS,
    }}
  />
</Stack.Navigator>

const Tab = createMaterialTopTabNavigator();

export default function HomeStack({
    navigation,
    route,
}: {
    navigation: StackNavigationProp<any>;
    route: any;
}) {
    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        });
    }, [navigation, route]);
    useFocusEffect(
        React.useCallback(() => {
            const onBackPress = () => {
                BackHandler.exitApp();
                return true;
            };

            BackHandler.addEventListener("hardwareBackPress", onBackPress);

            return () => BackHandler.removeEventListener("hardwareBackPress", onBackPress);
        }, []),
    );
    return (
        <Tab.Navigator tabBar={props => <CentralTab {...props} />} tabBarPosition="bottom" lazy>
            <Tab.Screen name="GROUPS" component={GroupsScreen} />
            <Tab.Screen name="FEED" component={FeedStack} />
            <Tab.Screen name="NEW" component={NewStack} />
        </Tab.Navigator>
    );
}

Answer 1

在导航时实现从右到左动画（以及返回时从左到右）的一种方法是使用TransitionPresets.SlideFromRightIOS：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

<NavigationContainer>
  <MainStack.Navigator>
    <MainStack.Screen name="ScreenA" component={ScreenA} />
    <MainStack.Screen
      name="ScreenB"
      component={ScreenB}
      options={{ ...TransitionPresets.SlideFromRightIOS }}
    />
  </MainStack.Navigator>
</NavigationContainer>

您可以在this Snack 中看到它的工作原理。适用于 iOS 和 Android。