未导航到本机反应中的特定屏幕

我是原生反应新手： 我创建了两个文件“Browse.js”和“Drawer.js” 我在“Browse.js”中有一些按钮，但是当我在“Drawer.js”中完成完整的“Browse.js”时 像这样：=>

import React, { Component } from "react";
import { Image, StyleSheet, ScrollView, TextInput, View } from "react-native";
import Slider from "react-native-slider";
import { AntDesign } from "@expo/vector-icons";
import { Foundation } from "@expo/vector-icons";
import { FontAwesome } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { RoleLogin } from "./Browse";
import Browse from "./Browse";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native"; 
import Login from "./Login"

import { Divider, Button, Block, Text, Switch } from "../components";
import { theme, mocks } from "../constants";



const Drawer = createDrawerNavigator();

export default function App() {
  return (

 <NavigationContainer>
      <Drawer.Navigator initialRouteName="Browse" openByDefault>
        <Drawer.Screen name="Browse" component={Browse} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

那么我无法从这里导航到特定屏幕意味着从抽屉屏幕： 显示这样的错误 => 任何导航器均未处理带有有效负载的“NAVIGATE”操作。

这是我的 Browse.js

import React, { Component } from "react";
import {
  Dimensions,
  Image,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  View,
} from "react-native";
import { ThemeColors } from "react-navigation";
import { Card, Badge, Button, Block, Text } from "../components";
import { theme, mocks } from "../constants";
import Settings from "./Settings";
import { NotificationsScreen, App } from "./Settings";
const { width } = Dimensions.get("window");
const Drawer = createDrawerNavigator();
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import Drawer1 from "./Settings";
import Home from "./Settings";

class Browse extends Component {
  state = {
    // active: "Products",
    // active: "Select_Acivity",
    categories: [],
    error: [],
    // data: [],
    roles: "",
    username: "",
    password: "",
    lading: false,
    title: "",
    data: "",
  };

  //++++++++++++++++++++++++++++++Drawer fun start++++++++++++++++++++++++++++++++++

  //++++++++++++++++++++++++++++++Drawer fun close++++++++++++++++++++++++++++++++++

  //*******************navagte to setting when data fetch start*************************/

  RoleLogin() {
    //  const { data } = this.state;
    // const { username, password, roles } = this.state;
    fetch(
      "https://jsonplaceholder.typicode.com/todos/1",
      //fetch(
      // "https://nasdigital.tech/Android_API_CI/validate_login_details",
      {
        method: "GET",
        headers: { "Content-Type": "application/json" },
        // body: JSON.stringify([{ data}]),
      }
    )
      .then((response) => response.json())

      .then((json) => {
        //login to check details from server and then display or navigate to another screen
        if (json != "error") {
          // if (response && response.length && response[0].message != "error")
          alert(JSON.stringify(json));
          this.props.navigation.navigate("Drawer", {
            data: json.title,
          });
          // .navigate("Settings", { data: json.title });
          // this.props.navigation.navigate("Settings",{data : json.title});
        } else {
          alert("Cehck Details");
        }
      })

      .catch((error) => alert("Cehck Details"));
  }
  //*******************navagte to setting when data fetch close**************************** */

  componentDidMount() {
    this.setState({ categories: this.props.categories });
  }

  // handleTab = tab => {
  //   const { categories } = this.props;
  //   const filtered = categories.filter(category =>
  //     category.tags.includes(tab.toLowerCase())
  //   );

  //   this.setState({ active: tab, categories: filtered });
  // };

  renderTab(tab) {
    const { active } = this.state;
    const isActive = active === tab;

    return (
      <TouchableOpacity
        key={`tab-${tab}`}
        onPress={() => this.handleTab(tab)}
        style={[styles.tab, isActive ? styles.active : null]}
      >
        <Text size={16} medium gray={!isActive} secondary={isActive}>
          {tab}
        </Text>
      </TouchableOpacity>
    );
  }

  render() {
    const { profile, navigation } = this.props;
    const { categories } = this.state;
    // // const tabs = ["Products", "Inspirations", "Shop"];
    // const tabs = ["Select_Activity", "Market_Visit"];
    // const tabs = ["Select_Activity"];
    const tabs = [""];
    return (
      <Block>
        <Block flex={false} row center space="between" style={styles.header}>
          <Text h1 bold>
            Select Activity
          </Text>
          <Button onPress={() => this.RoleLogin()}>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button>
          {/* <Button onPress={() => navigation.navigate("Settings")}>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button> */}
        </Block>

        <Block flex={false} row style={styles.tabs}>
          {tabs.map((tab) => this.renderTab(tab))}
        </Block>

        <ScrollView
          showsVerticalScrollIndicator={false}
          style={{ paddingVertical: theme.sizes.base * 2 }}
        >
          <Block flex={false} row space="between" style={styles.categories}>
            {categories.map((category) => (
              <TouchableOpacity
                key={category.name}
                onPress={() => navigation.navigate("MarketVisit", { category })}
              >
                <Card center middle shadow style={styles.category}>
                  <Badge
                    margin={[0, 0, 15]}
                    size={90}
                    color="rgb(255, 163, 102)"
                  >
                    <Image source={category.image} />
                  </Badge>
                  <Text medium height={20}>
                    {category.name}
                  </Text>
                  <Text gray caption>
                    {category.count}
                  </Text>
                </Card>
              </TouchableOpacity>
            ))}
          </Block>
        </ScrollView>
      </Block>
    );
  }
}

//+++++++++++++++++++++++++++++++++++++++++

//++++++++++++++++++++++++++++++++++++++

Browse.defaultProps = {
  profile: mocks.profile,
  categories: mocks.categories,
};

export default Browse;

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: theme.sizes.base * 2,
  },
  avatar: {
    height: theme.sizes.base * 1.0,
    width: theme.sizes.base * 1.5,
  },
  tabs: {
    borderBottomColor: theme.colors.gray2,
    borderBottomWidth: StyleSheet.hairlineWidth,
    marginVertical: theme.sizes.base,
    marginHorizontal: theme.sizes.base * 2,
  },
  tab: {
    marginRight: theme.sizes.base * 7,
    paddingBottom: theme.sizes.base,
  },
  active: {
    borderBottomColor: theme.colors.secondary,
    borderBottomWidth: 3,
  },
  categories: {
    flexWrap: "wrap",
    paddingHorizontal: theme.sizes.base * 1.5,
    marginBottom: theme.sizes.base * 2,
  },
  category: {
    // this should be dynamic based on screen width
    minWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
    maxWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
    maxHeight: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
  },
});

这是我的导航文件

import React from "react";
import { Image } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";

import Welcome from "../screens/Welcome";
import Login from "../screens/Login";
import SignUp from "../screens/SignUp";
import Forgot from "../screens/Forgot";
import Explore from "../screens/Explore";
// import Explore1 from "../screens/Explore1";
// import Explore2 from "../screens/Explore2";
// import Explore3 from "../screens/Explore3";
// import Explore4 from "../screens/Explore4";
// import Explore5 from "../screens/Explore5";
// import Explore6 from "../screens/Explore6";
// import Explore7 from "../screens/Explore7";
// import Explore8 from "../screens/Explore8";
import Browse from "../screens/Browse";
import Product from "../screens/Product";
//import Settings from "../screens/Settings";
import Drawer from "../screens/Drawer";
import MarketVisit from "../screens/MarketVisit";

import { theme } from "../constants";

const screens = createStackNavigator(
  {

    Welcome,
    Login,
    SignUp,
    Forgot,
    Explore,
    Drawer,
    //Browse,
    //Product,
    //Settings,
    MarketVisit,   
    // NotificationsScreen,
    // App,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        height: theme.sizes.base * 4,
        backgroundColor: theme.colors.white, // or 'white
        borderBottomColor: "transparent",
        elevation: 0 // for android
      },
      // headerBackImage: <Image source={require("../assets/2.jpg")} />,
      headerBackTitle: null,
      headerLeftContainerStyle: {
        alignItems: "center",
        marginLeft: theme.sizes.base * 2,
        paddingRight: theme.sizes.base
      },
      headerRightContainerStyle: {
        alignItems: "center",
        paddingRight: theme.sizes.base
      }
    }
  }
);

export default createAppContainer(screens);