我如何跳过动画仅替换为反应导航

Question

我正在使用 @react-navigation/stack^5.14.4 和 @react-navigation/native^5.9.4 来处理主页、登录和个人资料页面之间的场景转换。

我需要处理 2 个过渡案例：

主页 -> 配置文件（应启用动画）
登录->个人资料（需要跳过动画）

之所以跳过动画，是因为我在登录过程中使用了类似于Profile页面布局的加载骨架。在个人资料页面内容和骨架本身之间进行转换很奇怪。但是，如果从主页推送，我想保留很棒的动画。

有没有像

这样简单的解决方法

navigation.replace("Profile"); // with animation

navigation.replace("Profile", { animationEnabled: false }); // skip animation

Answer 1

您可以使用选项获取路线属性并查看天气是否有任何参数可以禁用屏幕

蛇：https://snack.expo.dev/@ashwith00/react-navigation-5-boilerplate

举个例子

function TestScreen({ navigation }) {
  return (
    <View style={styles.content}>
      <Button
        mode="contained"
        onPress={() => navigation.push('Test1', {disabledAnimation: true})}
        style={styles.button}>
        Push screen Without Animation
      </Button>
            <Button
        mode="contained"
        onPress={() => navigation.push('Test1')}
        style={styles.button}>
        Push new screen
      </Button>
      {navigation.canGoBack() ? (
        <Button
          mode="outlined"
          onPress={() => navigation.pop()}
          style={styles.button}>
          Go back
        </Button>
      ) : null}
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Test"
        component={TestScreen}
        options={{ title: 'Custom animation' }}
      />
      <Stack.Screen
        name="Test1"
        component={TestScreen}
        options={({ route }) => ({
          title: 'Custom animation',
            cardStyleInterpolator: !route.params?.disabledAnimation
              ? undefined
              : CardStyleInterpolators.forNoAnimation,
          })}
       
      />
    </Stack.Navigator>
  );
}

Answer 2

我找到了一种更简单的制作方法：

首先，从路由器文件中导出 Stack.Screen 节点。

export const ProfileStack = (
  <Stack.Screen name={'Profile'} component={Profile} />
);

export default Router = () => (
  <Stack.Navigator>
    <Stack.Screen name={'Home'} component={Home} />
    <Stack.Screen name={'Login'} component={Login} />
    {ProfileStack}
  </Stack.Navigator>
);

那我就可以这样执行一次把动画关掉

带动画：

<Button onClick={() => {
  navigation.replace('Profile');
}} />

没有动画

<Button onClick={() => {
  ProfileStack.props.options.animationEnabled = false;
  navigation.replace('Profile');
  ProfileStack.props.options.animationEnabled = true;
}} />

我如何跳过动画仅替换为反应导航

How do i skip the animation only replace with react-navigation

react-native

react-navigation