Question

我知道这个问题以前曾提出过，但是我找不到适合我的答案。

我只是想使用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在所有地方的拼写都完全相同。

Answer 1

按如下所示更改代码

const StartingScreen = ({ navigation }) => {

//lots of code

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

您要提供组件名称，但应提供堆栈中给出的屏幕名称，即“游戏”

Answer 2

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

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

响应本机错误：导航器未处理带有有效载荷{“ name”：“ GameScreen”}的动作'NAVIGATE'

2 个答案: