undefined不是一个对象(评估'navigation.navigate')，无法在反应原生中正确渲染

Question

我有两个文件"浏览.js"以及"；设置.js"我已经在"；设置.js"像这个

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

这正在进行渲染，但问题是，当我单击"特定"选项卡时，出现了这个错误=undefined不是对象(正在评估"navigationnavigation"(

这是我的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;

这是我的设置.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==我写这个只是因为我不能发布代码，我写这个是因为我不能张贴代码我写这个就是因为我不能发表代码我写这是因为我无法张贴代码ignore This==，我写这个只是因为我不能发布代码我写这个是因为我不能发送代码

Answer 1

尝试执行此

<Browse navigation={navigation} />