反应导航器未显示两条路线或全部路线

Question

**我想在我的应用程序上使用react导航器。在这里，我尝试制作两条路线，我想看看这些。但是我只看到第一个路线组件。他们没有关于“ def”的按钮。但是从react导航器复制那些代码。我还在零食模拟器中发现那里也显示了一条路线。我的代码不对吗？预先感谢**

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”）。屏幕名称将是您在初始化时在堆栈中提供的名称。

public int Id { get; set; }

public int Role { get; set; }

public string Description { get; set; }

public string RoleInfo 
{ 
    get 
    {
        return $"{Role} - {Description}";
    }  
}

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

private ObservableCollection<PersonModel> _people;
public ObservableCollection<PersonModel> People
{
    get { return _people; }
    set
    {
        _people = value;
        NotifyOfPropertyChange(() => People);
    }
}

public PersonViewModel(IEventAggregator events, IWindowManager windowmanager)
{
    _events = events;
    _windowManager = windowmanager;

    sql = "SELECT * FROM Person";
    People = SqliteConnector.LoadData<PersonModel>(sql, new Dictionary<string, object>());
}