undefined is not an object (evaluating 'navigation.navigate'), Cant render properly in react native

问题

I have Two files "Browse.js" and "Setting.js" I have render MY complete Browse Screen in "Setting.js" like this

function NotificationsScreen({ navigation }) {
  return (
    <Browse />
  );
}

this is working its rendering But problem is that, when I click on Specific tab Then got this error = undefined is not an object (evaluating 'navigation.navigate')

this is my 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";
class Browse extends Component {
  state = {
    // active: "Products",
    // active: "Select_Acivity",
    categories: [],
    error: [],
    // data: [],
    roles: "",
    username: "",
    password: "",
    lading: false,
    title: "",
    data: "",
  };
  RoleLogin() {
    fetch(
      "https://jsonplaceholder.typicode.com/todos/1",
      {
        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("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 });
  }
  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 = [""];
    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>
        </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;

And Here is My Settings.js

import * as React from "react";
import { Button, View } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import Browse from "./Browse";
import { theme, mocks } from "../constants";
//import Settings from "./TRYforSetting";
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 { Divider } from "../components";
import { render } from "react-dom";

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button onPress={() => navigation.goBack()} title="Right Swipe Kar" />
    </View>
    //<Browse navigation={navigation} />
  );
}
function Home({ navigation }) {
  return (
    // <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    //   <Button onPress={() => navigation.goBack()} title="Right Swipe Kar" />
    // </View>
    <Browse navigation={navigation} />
    //<Navigation />
    //<Browse />
  );
}
const Drawer = createDrawerNavigator();

export default function Settings() {
  return (
    <NavigationContainer>
      <Drawer.Navigator openByDefault>
        <Drawer.Screen
          name="User Name"
          options={{
            drawerIcon: ({ focused, size }) => (
              <AntDesign name="user" size={24} color="black" />
            ),
          }}
          component={Home}
        />
  </Drawer.Navigator>
    </NavigationContainer>
  );
}

ignore This == I am just writing this because I cant post code, I am just writing this because I cant post code I am just writing this because I cant post code I am just writing this because I cant post code ignore This == I am just writing this because I cant post code, I am just writing this because I cant post code I am just writing this because I cant post code I am just writing this because I cant post code ignore This == I am just writing this because I cant post code, I am just writing this because I cant post code I am just writing this because I cant post code I am just writing this because I cant post code

回答1:

Try doing this

<Browse navigation={navigation} />

来源：https://stackoverflow.com/questions/65595240/undefined-is-not-an-object-evaluating-navigation-navigate-cant-render-prope