反应导航器不显示两条路线或所有路线

Question

** 我想在我的应用上使用 react navigator。在这里，我尝试制作两条路线，我想看看这些。但我只看到第一个路由组件。他们没有关于“def”的按钮。但是从反应导航器中复制这些代码。我还在小吃模拟器中发现了一条路线。我的代码错了吗？？提前谢谢**

import { StatusBar } from 'expo-status-bar';
import React,{useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MultipleDateEntrys from './UI/Pages/MultipleDateEntrys.js'
import MaxCountrysEntry from './UI/Pages/MaxCountryData'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    
       <Text>abc</Text>
    </View>
  );
}
function def() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    
       <Text>cde</Text>
    </View>
  );
}



export default function App() {
  const title = useState('Corona Highlight')
  
  
  return (
    
        <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
           name="Home"
            component={HomeScreen}
             options={{ title: 'Overview' }}/>
        <Stack.Screen
                name="Mon"
                component={def}
                options={{ title: 'def' }}/>
          
      </Stack.Navigator>
   
      {/* <Text style={styles.title}>{title}</Text> */}
      


    </NavigationContainer>
          
  );
}

Answer 1

使用堆栈导航器时，只会显示一个屏幕，这是预期的行为。

您必须使用按钮或类似组件导航到另一个屏幕。

所有屏幕都有一个导航道具，您可以使用它来导航。

为了导航到屏幕，您必须使用 navigation.navigate("ScreenName")。这里的屏幕名称将是您在初始化时在堆栈中提供的名称。

function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button title="Navigate" onPress={()=>navigation.navigate("Mon")}/>
       <Text>abc</Text>
    </View>
  );
}

如果您希望两个屏幕在同一个视图中，您可以使用tab navigator，这将允许您使用选项卡切换屏幕

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home"
            component={HomeScreen}
             options={{ title: 'Overview' }} />
      <Tab.Screen   name="Mon"
                component={def}
                options={{ title: 'def' }}/>
    </Tab.Navigator>
  );
}