如何在 React Native 中从一个屏幕导航到另一个屏幕？

Question

我想创建从一个屏幕到另一个屏幕的导航。我使用了反应导航中的说明。下面是我的世博小吃链接。完整代码在那里。

链接：https://snack.expo.dev/@john.ocean/68d88a

Answer 1

编辑https://snack.expo.dev/@horstleung/smiling-chocolates

您的问题：

1. 您的组件未导出，您可以参考here

import React from 'react';
import Documents from './Documents';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './Home';


import { NavigationContainer } from '@react-navigation/native';
import DetailOne from './DetailOne';
import DetailTwo from './DetailTwo';
import App from '../App';

const Stack = createStackNavigator();

const DetailStack = ({navigation}) => (
  <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={App}/>
    <Stack.Screen name="DetailOne" component={DetailOne}/>
    <Stack.Screen name="DetailTwo" component={DetailTwo}/>
  </Stack.Navigator>
  </NavigationContainer>
)

2. 您不再需要一个NavigationContainer
3. 在您的 DetailStack 中，应该是 Home 组件，而不是 App

<Stack.Screen name="Home" component={App}/>