无法在响应本机中导航到屏幕

Question

我已经在React native中创建了一个底部导航。我有底部导航器屏幕。 这里有一个按钮作为菜单，实际上是模态，包含其余选项。 我能够渲染模式，但无法返回导航页面或关闭模式。 如果我出了错，请帮助我。 这是BottomNavigation的代码。

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import Home from "./Home";
import Profile from "./Profile";
import UserDevice from "./UserDevice";
import {
  Entypo,
  AntDesign,
  MaterialIcons,
  FontAwesome5,
} from "@expo/vector-icons";
import CustomModal from "../Components/CustomModal";

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

const TAB = createBottomTabNavigator();
const ModalComponent = () => <View style={{flex:1, backgroundColor:"blue"}} />
export default class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  showModal = () => {
    this.setState({
      showModal: true,
    });
  };

  render() {
    return (
      <TAB.Navigator mode="modal"
        screenOptions={{animationEnabled:true}}
      >
        <TAB.Screen
          name="Home"
          component={Home}
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color }) => (
              <AntDesign name="home" color={color} size={26} />
            ),
          }}
        />
        <TAB.Screen
          name="User's Device"
          component={UserDevice}
          options={{
            tabBarLabel: "User's Device",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="devices" color={color} size={26} />
            ),
          }}
        />
        <TAB.Screen
          name="Profile"
          component={Profile}
          options={{
            tabBarLabel: "Profile",
            tabBarIcon: ({ color }) => (
              <Entypo name="user" color={color} size={26} />
            ),
          }}
        />
        <TAB.Screen
          name="Menu"
          component={ModalComponent}
          options={{
            tabBarIcon: (props) => (
              <Entypo name="menu" size={24} color="#8e8e8e" />
            ),
            
          }}
          listeners={( {navigation} ) => ({
            tabPress: e =>{
              e.preventDefault(); 
              navigation.navigate("CustomModal");
            }
          })}
        />
      </TAB.Navigator>
    );
  }
}
// export default Dashboard;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

这是“ CustomModal.js”的代码

import React, { Component } from "react";
import { Modal, Text, Button,View, StyleSheet,TouchableWithoutFeedback, Picker } from "react-native";

export default class CustomModal extends Component {
  constructor(props){
    super(props);
    this.state={
      showModal:true
    }
  }
  
  render() {
    console.log("Hi from ModelPicker");
    // console.log("ModelData recieved-->>", this.state.currentItem.availableSize);
    return (
      <View>
        <Modal animationType="slide" visible={this.state.showModal} transparent={true}>
          <View style={styles.modelContainer}>
            <View style={styles.viewPicker}>
              <View style={styles.pickerHeader}>
                <Text style={{ fontSize: 20, color: "#3073c1",alignSelf:"center" }}>More</Text>
              </View>
              <Button onPress={()=> {this.props.navigation.navigate("Loading")}} title="Loading" />
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  modelContainer: {
    flex: 1,

    backgroundColor: "rgba(0,0,0,0.5)",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  viewPicker: {
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    height: 350,

    marginTop: 10,
    width: "100%",
    backgroundColor: "#fff",
  },
  pickerHeader: {
    height: 60,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignContent: "center",
    backgroundColor: '#fff',
        
        height: 60,
        shadowColor: '#3073c1',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  1.0,
        shadowRadius: 3,
        elevation: 5,
  },
});