Question

我使用名为“User”的React-Navigation屏幕来显示有关特定用户的信息。当导航到这条路线时，我传递了参数“id”，它告诉屏幕它正在处理什么用户。查看用户时，可以单击可以查看其他用户的内容。

此时此功能正常，新参数会显示其他用户的详细信息。问题是它不会导航到其他用户的新屏幕，而只是更改当前屏幕。问题是，当您向后导航时，它不会将您带到初始用户的屏幕，而是前面的任何内容。您也没有得到导航的视觉提示。

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

如果它有所不同，我正在使用Redux并通过调度生成的操作进行导航，如：

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

Answer 1

您正在寻找推，而不是导航。使用导航时，它将查找具有该名称的路线，如果存在，则导航至该名称。使用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

Use the navigation key导航到同一条路线

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

this.props.navigation.dispatch(navigateAction);

OR

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

React-Navigation使用不同的参数进入相同的路径

3 个答案: