时间戳

首页 > 解决方案 > 我如何跳过动画只替换为反应导航

react-native - 我如何跳过动画只替换为反应导航

问题描述

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

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

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

有没有像这样的简单解决方案

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

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

标签： react-nativereact-navigation

解决方案

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

小蛇：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>
  );
}

推荐阅读