react-native - 为什么堆栈导航不适用于这些屏幕？

Question

我正在开发一个教育应用程序，如果用户点击一个主题，它应该指向该主题的章节屏幕。我为此使用堆栈导航，但它似乎不起作用。

这是 App.js：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import WelcomeScreen from './screens/WelcomeScreen';
import HomeScreen from './screens/HomeScreen';
import {createAppContainer,createSwitchNavigator} from 'react-navigation';
import {AppStackNavigator} from './components/AppStackNavigator';

export default class App extends React.Component{
  render(){
    return(
      <View>
      <AppContainer/>
      </View>
    )
  }
}

const switchNavigator = createSwitchNavigator({
  WelcomeScreen:{screen:WelcomeScreen},
  HomeScreen:{screen:AppStackNavigator}
})

const AppContainer = createAppContainer(switchNavigator)

这是堆栈导航器：

import React,{Component} from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import SelectChapters1 from '../screens/Comprehension/SelectChapters1';
import SelectChapters2 from '../screens/Drama/SelectChapters2';
import SelectChapters3 from '../screens/History/SelectChapters3';
import SelectChapters4 from '../screens/Music/SelectChapters4';
import SelectChapters5 from '../screens/Poetry/SelectChapters5';
import HomeScreen from '../screens/HomeScreen';

export const AppStackNavigator = createStackNavigator({
  Home:{screen:HomeScreen},
  SelectChapters1:{screen:SelectChapters1},
  SelectChapters2:{screen:SelectChapters2},
  SelectChapters3:{screen:SelectChapters3},
  SelectChapters4:{screen:SelectChapters4},
  SelectChapters5:{screen:SelectChapters5},
},
{
  initialRouteName:"Home"
}

)

标签： react-nativestack-navigator