reactjs - 在屏幕之间反应原生导航

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;

标签： reactjsreact-native

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 的更多详细信息。