React-Navigation 使用不同的参数转到相同的路线

Question

我正在使用名称为 "User" 的 React-Navigation 屏幕来显示有关特定用户的信息。当导航到这条路线时，我传递参数 "id" 告诉屏幕它正在处理的用户。查看用户时，可以单击让您查看另一个用户的内容。

目前这有效，新参数使其他用户的详细信息显示出来。问题是它不会导航到其他用户的新屏幕，而只是更改当前屏幕。问题是，当您向后导航时，它不会将您带到初始用户的屏幕，而是将您带到之前的屏幕。您也看不到导航的视觉提示。

因此我想知道如何强制它导航到同一路线的另一个版本。

如果有任何不同，我正在使用 Redux 并通过分派生成的操作来导航，例如：

NavigationActions.navigate({ routeName: 'User', params: {userId} })

Answer 1

您正在寻找 push 而不是 navigate。当您使用 navigate 时，它会查找具有该名称的路由，如果存在则导航至该路由。当你使用 push 时，你会去到一个新的路线，将一个新的导航添加到堆栈中。

在此处查看文档 https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

对于你的情况，你应该这样做：

NavigationActions.push({ routeName: 'User', params: {userId} })

或者通过你的道具（确保你的道具有'navigation'）：

this.props.navigation.push('User', {userId:'paramValue'})

Answer 2

Use the navigation key 导航到同一路线

const navigateAction = NavigationActions.navigate({
    routeName: 'User', 
    params: {userId},
    key: 'APage' + APageUUID
});

this.props.navigation.dispatch(navigateAction);

或

this.props.navigation.navigate({
    routeName: 'User', 
    params: {userId},
    key: 'APage' + APageUUID
});

APageUUID只是一个唯一的页面id，可以用Math.random () * 10000

生成

Reference

Answer 3

实际上，应该使用 push 函数而不是 navigate:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
);

const DetailsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
    <Button
      title="Go to Details... again"
      onPress={() => navigation.push('Details')} // push instead of navigate
    />
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

测试一下here

Answer 4

这将在 id 更改时使用新数据重新加载页面。

 const [id , setId] = useState(props.route.params.id)

useEffect(() => {

        setId(props.route.params.id)

    }, [props.route.params?.id])

在组件上放置一个 onPress 侦听器，同时传递 id 或任何道具，例如..

 onPress={() => navigate(`yourComponentRouteName`, { id: _id })}

React-Navigation 使用不同的参数转到相同的路线

React-Navigation go to same route with different params

react-native

react-navigation