如何导航多级反应导航

Question

我正在构建需要多级导航的应用程序，但我无法继续前进。 解释有点含糊，但是代码会清楚说明。

下面我在App.js中声明导航

import React, {Component} from "react";
import {
  StyleSheet,
  View,
} from "react-native";

import {createAppContainer, StackRouter } from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer';
import googleMapsImages from "./components/GoogleMapsImage";
import Insights from "./components/Insights";
import TeamAlerts from "./components/TeamAlerts";
import Addhazard from "./components/AddHazard";
import YourTeam from './components/YourTeam'
import More from './components/More'
import { createStore } from 'redux'
import counter from './redux/reducer/counter'
import { Provider } from 'react-redux';
import Newhazardscreen from './components/AddHazardComponents/NewHazardScreen'

const AppNavigator = createBottomTabNavigator(
    {
      Insights: {screen: Insights},
      Incidents: {screen: googleMapsImages},
    Plus: {screen: Addhazard},
      'Team alerts': {screen: TeamAlerts},
      More: {screen: More,},
    },

    {
    tabBarOptions: {
      activeTintColor: 'green',
      inactiveTintColor: 'gray',
    },
  }
);

const Drawernavigator = createDrawerNavigator(
  {
    BottomNavigator: {screen: AppNavigator},
    Team: {screen: YourTeam},
  }
);
const AppContainer = createAppContainer(Drawernavigator);


class App extends Component {
  render(){
    return (
    <Provider store={store}>
        <View style={styles.container}>
          <AppContainer counterState={this.state}/> 
        </View>
      </Provider>
    );
  }
}


export default App

然后，一旦我按下AddHazard.js，就会弹出一个带有不同选项的屏幕，到目前为止，它仍然可以正常工作。之后，我到达弹出的屏幕，我想导航到与该选项相关的屏幕。这是它停止工作的地方，我看不到如何使它工作。 代码下方：

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, Button, TouchableOpacity} from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';
import { withNavigation } from 'react-navigation';
import NewHazardScreen from './AddHazardComponents/NewHazardScreen'
class Addhazard extends Component {
    componentDidMount() {
        const { navigation } = this.props;
        this.focusListener = navigation.addListener('didFocus', () => {
            this._panel.show()
        });
      }

        componentWillUnmount() {
            // Remove the event listener
            this.focusListener.remove();
        }

    render(){
        return(
            <View style={styles.container}>
                <SlidingUpPanel ref={c => this._panel = c} draggableRange={{top: 800, bottom: 0}} allowDragging={false}>
                    <View style={styles.containerPanel}>
                    <TouchableOpacity style={styles.goBackText}>
                        <Text style={{color: '#46c24e', fontWeight: '300',}} onPress={() => this.props.navigation.navigate('Team alerts')}>cancel</Text>
                    </TouchableOpacity>

                        <View style={styles.newIncidentHamburger}>
                            <View style={styles.newIncidentContainer}>
                                <Text style={styles.newIncidentText} onPress={() => this.props.navigation.navigate('NewHazardScreen')}>Hazard</Text>
                            </View>
                            <View style={styles.newIncidentContainer} >
                                <Text style={styles.newIncidentText}>Near Miss</Text>
                            </View>
                    </View>
                </SlidingUpPanel>
            </View>
        )
    }
}
export default withNavigation(Addhazard);

onPress的“团队警报”有效，但onPress的无法转到NewHazardScreen。

newHazardScreen的代码在下面，但是我不知道这是否有用。

import React, {Component} from 'react'
import {View, Text, StyleSheet, Image} from 'react-native';
import { withNavigation } from 'react-navigation';

class NewHazardScreen extends Component {
    render(){
        return(
    <View style={styles.container}>
        <Text>NEW HAZARD </Text>
    </View>)

    }
}
export default withNavigation(NewHazardScreen);