为什么嵌套的堆栈导航不能反应原生？

Question

我是初学程序员，我正在尝试使用本机创建嵌套导航器。主屏幕上的堆栈导航器工作，但MyEvents屏幕上的堆栈导航器不起作用。我使用选项卡在Home和MyEvents之间导航，在这些页面中我想使用堆栈导航器来访问其他页面。请帮忙！ （如果我不清楚，也请告诉我）

这是Router.js

import React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';

import InputScreen from './InputPage';
import HomeScreen from './Home';
import DetailsScreen from './Details';
import MyEventsScreen from './MyEvents';
import EditScreen from './EditPage';
import MapScreen from './Map';

const BottomNavigation = require('react-native-bottom-navigation');

export const Tabs = TabNavigator({
  Home: {screen: HomeScreen},
  EventMap: {screen: MapScreen},
  Input: {screen: InputScreen},
  MyEvents:{screen: MyEventsScreen},
},{
    tabBarOptions: {
      activeTintColors: '#e91e63',
      //swipeEnabled: true,
    }
});

export const EventsStack = StackNavigator({

  Home: {
    screen: Tabs,
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      header: null,

    },
  },

});

export const MyEventsStack = StackNavigator({

  MyEvents: {
    screen: Tabs,

    navigationOptions: {
      header: null
    }
  },
  MyEventsDetails: {
    screen: EditScreen,
    navigationOptions: {
      header: null,
      /*navigation: ({ navigation }) => ({
      title: `${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()}`,
    }),*/
    },
  },

});


export const Root = StackNavigator({
  TabNav: {
    screen: EventsStack,
  }


}, {headerMode: 'none'});

这是Home.js

import React, {Component} from 'react';
import {View, Text, TouchableHighlight,  SectionList} from 'react-native';
import {ListItem} from 'react-native-elements';
import {firebaseApp} from './App';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {StackNavigator, TabNavigator} from 'react-navigation';
import {Tabs} from './Router';

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
    this.itemsRef = firebaseApp.database().ref().child('items');
    console.ignoredYellowBox = [
         'Setting a timer'
     ];
  }
  onLearnMore = (item) => {
    this.props.navigation.navigate('Details', {
      ...item
    });
  };
  static navigationOptions = {
      tabBarLabel: 'Home',
      tabBarIcon: ({tintColor}) => (
        <Icon
          name = {'Home'}
          size = {26}
          style = {{color: tintColor}} />
      )
  }
  listenForItems(itemsRef) {
    itemsRef.on('value', (snap) => {
      // get children as an array
      var items = [];
      snap.forEach((parent) => {
        var children = [];
        parent.forEach((child) => {
        children.push({
          "name": child.val().name,
          "when": child.val().when,
          "who": child.val().who,
        });
      });
      items.push({
        data: children,
        key: parent.key.toUpperCase(),
      })
      });
      this.setState({
        data: items
      });
    });
  }
  componentDidMount() {
    this.listenForItems(this.itemsRef);
  }
  render() {
    var styles = require('./Styles');
    const {navigate} = this.props.navigation;
    return (
      <View style={{flex: 1}}>
        <View style={styles.header}>
          <Text style={styles.title}>Princeton Events</Text>
        </View>
        <View style={styles.body}>
        <SectionList renderItem={({item}) => <ListItem style={styles.item}
            title={item.name} subtitle={item.when}
            onPress={() => this.onLearnMore(item)}/>}
            renderSectionHeader={({section}) =>
            <Text style={styles.sectionHeader}>{section.key}</Text>}
            sections={this.state.data} keyExtractor={(item) => item.name}/>
        </View>
      </View>
    );
  }
}

这是MyEvents.js

import React, {Component} from 'react';
import {View, Text, TouchableHighlight, FlatList} from 'react-native';
import {ListItem, List} from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Router from './Router';


export default class MyEventsScreen extends Component {
  onViewMyEvent = (item) => {
    this.props.navigation.navigate('Edit', {
      ...item
    });
  };



  static navigationOptions = {
      tabBarLabel: 'MyEvents',
      tabBarIcon: ({tintColor}) => (
        <Icon
          name = {'account circle'}
          size = {26}
          style = {{color: tintColor}} />
      )

  }

  render() {
    var styles = require('./Styles');
    const {navigate} = this.props.navigation;
    return (
      <View style={{
        flex: 1
      }}>
        <View style={styles.header}>
          <Text style={styles.title}>My Events</Text>
        </View>
        <View style={styles.body}>
          <List containerStyle={{
            borderTopWidth: 0,
            borderBottomWidth: 0
          }}>
            <FlatList data={[
              {
                "name": "Event 1",
                "who": "E-Club",
                "what": "description goes here description goes here description goes here",
                "when": "1:00",
                "where": "Ehub",
                "RSVP": "yes"
              }, {
                "name": "Event 2",
                "who": "Club 2",
                "what": "description goes here",
                "when": "2:00",
                "where": "Location 2",
                "RSVP": "no"
              }
            ]} renderItem={({item}) => <ListItem style={styles.item} title={item.name} subtitle={item.when} containerStyle={{
              borderBottomWidth: 0
            }} onPress={() => this.onViewMyEvent(item)}/>} keyExtractor={(item, index) => index}/>
          </List>
        </View>
        <View style={styles.footer}>
          <TouchableHighlight style={styles.button} onPress={() => navigate('Home')} underlayColor='#ffd199'>
            <Text style={styles.buttonText}>Back</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}