React Native 错误：带有有效负载 {"name":"GameScreen"} 的操作 'NAVIGATE' 未被任何导航器处理答案

【问题标题】：React Native Error: The action 'NAVIGATE' with payload {"name":"GameScreen"} was not handled by any navigatorReact Native 错误：带有有效负载 {"name":"GameScreen"} 的操作 'NAVIGATE' 未被任何导航器处理
【发布时间】：2020-10-01 11:26:11
【问题描述】：

我知道以前有人提出过这个问题，但我没有找到任何适合我的答案。

我只是想从屏幕“开始”导航到屏幕“游戏”，使用 App.js 作为路由器。

App.js：

const Stack = createStackNavigator();

const App = () => {  
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Start">
          <Stack.Screen name="Start" component={StartingScreen} />
          <Stack.Screen name="Game" component={GameScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
};

StartingScreen.js：

const StartingScreen = ({ navigation }) => {

//lots of code

return (
//more code
<Button title="Begin" onPress={() => {navigation.navigate('GameScreen')}}/>
)

这给了我标题中的错误（“你有一个名为'GameScreen'的游戏吗？”）并且没有任何反应。我曾尝试遵循 React Navigation 文档，但在他们的示例中，他们将所有内容都放在了 App.js 中，这对我不起作用。我尝试过的其他事情包括将导航堆栈导出到 StartingScreen.js、更改 navigation.navigate() 的参数、将导航器放置在 StartingScreen.js 中。

GameScreen 在所有地方的拼写完全相同。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

如下更改您的代码

const StartingScreen = ({ navigation }) => {

//lots of code

return (
//more code
<Button title="Begin" onPress={() => {navigation.navigate('Game')}}/>
)

您正在提供组件名称，但您应该提供您在堆栈中提供的屏幕名称，即“游戏”

【讨论】：

【解决方案2】：

由于您的屏幕名称在堆栈导航器中指定为“Game”，因此您应该导航到“Game”而不是“GameScreen”。

onPress={() => {navigation.navigate('Game')}}

【讨论】：