Question

我试图在两个屏幕之间导航，但它不起作用这是我的代码当我运行代码时，它会出错

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {MainPage, ListPage, DetailPage} from './pages';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Screen name="Main" component={MainPage}  />
      <Stack.Screen name="List" component={ListPage} />
      <Stack.Screen name="Detail" component={DetailPage} />
      
    </NavigationContainer>
  );
}

export default App;

Answer 1

将您的代码更新为以下内容。

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {MainPage, ListPage, DetailPage} from './pages';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={MainPage}  />
        <Stack.Screen name="List" component={ListPage} />
        <Stack.Screen name="Detail" component={DetailPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

您可以找到有关如何使用 Stack Navigator here 的更多详细信息。

Answer 2

在 <Stack.Navigator> 标签后使用 <NavigationContainer> 标签

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Main" component={MainPage}  />
    <Stack.Screen name="List" component={ListPage} />
    <Stack.Screen name="Detail" component={DetailPage} />
  </Stack.Navigator>
</NavigationContainer>

在屏幕之间反应原生导航

2 个答案: