重新加载堆栈并在 react-native 中滑动

Question

I am trying to swipe in a page and I have:

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>
  );
}

When I'm on IvoryFeedScreen , I have:

import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native';
import { Link } from '@react-navigation/native';

export function IvoryFeedScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Ivory Feed Screen</Text>
      <Link to="/home">Home</Link>
      <Link to={`/feed/${Math.random()}`}>Feed - {Math.random()}</Link>
    </View>
  );

}

So when you click through to feed, it simply refreshes. But I want it to swipe in as if it were a new route. Can this be accomplished?

Answer 1

Use action to change behavior for in-page navigation. push action adds a route on top of the stack, so a route can be present multiple times.

<Link 
  to={`/Details/${Math.random()}`} 
  action={StackActions.push(`Details`)}>
  Feed - {Math.random()}
</Link>