React Native中实现栈页面重载时的滑动转场效果

问题核心：当导航到同名称路由（如feed）时，React Navigation默认只会更新页面参数，不会创建新的路由栈条目，因此没有转场滑动动画。要实现类似新路由的滑动效果，需要用push方法替代默认的navigate行为。

解决方案步骤 #

1. 替换Link组件为useNavigation + push方法 #

在IvoryFeedScreen中，使用useNavigation钩子获取导航实例，通过navigation.push触发新页面的添加：

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export function IvoryFeedScreen({ route }) {
  const navigation = useNavigation();
  // 接收路由参数（可选）
  const feedId = route.params?.id;

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Ivory Feed Screen {feedId ? `#${feedId}` : ''}</Text>
      {/* 跳转到Home页面（用navigate即可） */}
      <TouchableOpacity onPress={() => navigation.navigate('home')} style={{ marginVertical: 10 }}>
        <Text>Home</Text>
      </TouchableOpacity>
      {/* 用push添加新的feed页面实例 */}
      <TouchableOpacity onPress={() => navigation.push('feed', { id: Math.random() })}>
        <Text>Feed - {Math.random()}</Text>
      </TouchableOpacity>
    </View>
  );
}

2. 原理说明 #

• navigation.navigate：如果目标路由已经在栈顶，只会更新路由参数，不会添加新栈条目，因此无转场动画。
• navigation.push：无论目标路由是否存在于栈中，都会向栈内添加一个新的页面实例，从而触发你配置的vertical滑动转场动画。

3. 路由配置无需修改 #

你的App.js原有配置保持不变即可：

import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from './screens/Home';
import { IvoryFeedScreen } from './screens/IvoryFeed';

export default function App() {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='feed' screenOptions={{ headerShown: false, gestureDirection: 'vertical' }}>
        <Stack.Screen name="feed" component={IvoryFeedScreen} />
        <Stack.Screen name="home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者Shamoon