反应导航使用不同的参数转到相同的路线

Question

我正在使用名为"User"的React-Navigation屏幕来显示有关特定用户的信息。导航到此路由时，我传递参数"id"，它告诉屏幕它正在处理哪个用户。查看用户时，可以单击允许您查看其他用户的内容。

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

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

如果有任何区别，我正在使用 Redux 并通过调度生成的操作进行导航，例如：

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

Answer 1

您正在寻找推送而不是导航。使用 navigate 时，它会查找具有该名称的路由，如果存在，则导航到该路由。使用 push 时，您将转到新路由，向堆栈添加新导航。

请参阅此处的文档 https://reactnavigation.org/docs/en/navigating.html#navigate-to-a-route-multiple-times

在您的情况下，您应该执行以下操作：

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

或者通过你的道具（确保你的道具有"导航"）：

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

Answer 2

使用导航键导航到同一路线

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生成

参考

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;

在这里测试

Answer 4

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

 const [id , setId] = useState(props.route.params.id)
useEffect(() => {
        setId(props.route.params.id)
    }, [props.route.params?.id])

在传递 id 或任何道具时在组件上放置一个 onPress 侦听器。

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