![](/img/trans.png)
[英]undefined is not an object (evaluating 'navigation.navigate') (Device)
[英]undefined is not an object navigation.navigate
我在本机反应中使用反应导航,并且能够在某些屏幕之间移动。 但是,在我的 Dashboard.js 上,我使用三元组来呈现具有图标的 Borrower.js 组件。 当我按下支付债务图标时,它应该将我带到主屏幕组件,但我收到以下消息“未定义不是 object navigation.navigate”。 我试图将导航解构为道具,然后作为 onPress function 中的参数,但它不起作用,因此删除了该代码。 我究竟做错了什么?
应用程序.js
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { StyleSheet } from "react-native";
import { ScreenStack } from "react-native-screens";
import Login from "./Login";
import Join from "./Join";
import Home from "./Home";
import Dashboard from "./Dashboard";
import BorrowMap from "./BorrowMap";
import SpotRequest from "./SpotRequest";
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ title: "Welcome" }}
/>
<Stack.Screen
name="Login"
component={Login}
options={{ title: "Login" }}
/>
<Stack.Screen
name="Join"
component={Join}
options={{ title: "Register" }}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={{ title: "Dashboard" }}
/>
<Stack.Screen
name="Spot Request"
component={SpotRequest}
options={{ title: "Spot Request Details" }}
/>
<Stack.Screen
name="Finding Buddy"
component={BorrowMap}
options={{ title: "Finding Buddy" }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
仪表板.js
import React from "react";
import { StyleSheet, Text, View, Switch } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Icon } from "react-native-elements";
import { Avatar, Accessory, Header, Divider } from "react-native-elements";
import { useState } from "react";
import BorrowerDash from "./BorrowerDash";
import LenderDash from "./LenderDash";
function Dashboard({ navigation }) {
const [switchValue, setSwitchValue] = useState(false);
const toggleSwitch = (value) => {
setSwitchValue(value);
};
navigation;
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.avatar}>
<Avatar
size={35}
rounded
title="KM"
source={{
uri: "KM",
}}
></Avatar>
</View>
<Switch
style={styles.switch}
onValueChange={toggleSwitch}
value={switchValue}
/>
<View>
{switchValue ? (
<Text style={styles.portalSwitch}>Lender</Text>
) : (
<Text style={styles.portalSwitch}>Borrower</Text>
)}
<View style={styles.ratingRow}>
<View style={styles.ratingSpace}>
<Icon name="star" size={10} type="font-awesome" color="gold" />
</View>
<View style={styles.ratingSpace}>
<Icon name="star" size={10} type="font-awesome" color="gold" />
</View>
<View style={styles.ratingSpace}>
<Icon name="star" size={10} type="font-awesome" color="gold" />
</View>
<View style={styles.ratingSpace}>
<Icon name="star" size={10} type="font-awesome" color="gold" />
</View>
</View>
</View>
</View>
{/* <Text style={styles.iconRatingText}>Rating</Text> */}
{switchValue ? (
<Text style={styles.iconText}>Spot</Text>
) : (
<Text style={styles.iconText}>Owe</Text>
)}
<View style={styles.row}>
{switchValue ? (
<Text style={styles.dashTitle}>
<Text style={styles.spotColor}>$650.00</Text>
</Text>
) : (
<Text style={styles.dashTitle}>
<Text style={styles.oweColor}>$305.47</Text>
</Text>
)}
</View>
{!switchValue ? <BorrowerDash /> : <LenderDash />}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
alignItems: "center",
justifyContent: "space-evenly",
},
header: {
height: "20px !important",
},
avatar: {
marginRight: 0,
marginTop: 5,
marginLeft: 10,
},
switch: {
marginTop: 5,
marginLeft: 130,
marginRight: 80,
},
switchText: {
marginBottom: 30,
},
portalSwitch: {
marginRight: 20,
padding: 10,
color: "black",
fontWeight: "bold",
},
welcome: {
fontSize: 35,
fontWeight: "bold",
marginBottom: 1,
marginTop: 5,
marginLeft: 0,
},
dashTitle: {
fontSize: 80,
color: "black",
fontWeight: "normal",
marginBottom: 1,
marginTop: 2,
padding: 15,
},
lendColor: {
color: "#28a745",
borderRightColor: "gray",
borderRightWidth: 10,
},
oweColor: {
color: "#343d47",
},
spotColor: {
color: "#343d47",
},
button: {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#28a745",
padding: 10,
width: 375,
height: 50,
marginBottom: 5,
borderRadius: 5,
},
buttonText: {
color: "white",
fontWeight: "bold",
},
row: {
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 30,
},
ratingRow: {
flexDirection: "row",
justifyContent: "center",
marginBottom: 1,
},
iconText: {
textAlign: "center",
fontWeight: "bold",
color: "gray",
},
iconRatingText: {
textAlign: "center",
fontWeight: "bold",
color: "gray",
marginBottom: 20,
},
iconSpace: {
marginLeft: 5,
marginRight: 5,
padding: 2,
},
ratingSpace: {
marginLeft: 1,
marginRight: 1,
},
iconAlert: {},
});
export default Dashboard;
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Icon } from "react-native-elements";
import { useState } from "react";
function BorrowerDash({navigation}) {
const [switchValue, setSwitchValue] = useState(false);
const toggleSwitch = (value) => {
setSwitchValue(value);
};
return (
<ScrollView>
<View style={styles.container}>
<View style={styles.row}>
<View style={styles.iconSpace}>
<Icon
name="message"
size={60}
color="#28a745"
underlayColor="#be748b"
/>
<Text style={styles.iconText}>Messages</Text>
</View>
<View style={styles.iconSpace}>
<Icon
name="redeem"
size={60}
color="#28a745"
onPress={() =>
navigation.navigate("Spot Request", {
name: "Spot Request Details",
})
}
/>
<Text style={styles.iconText}>Borrow</Text>
</View>
<View style={styles.iconSpace}>
<Icon name="history" size={60} color="#28a745" color="#28a745" />
<Text style={styles.iconText}>Activity</Text>
</View>
<View style={styles.iconSpace}>
<Icon
name="monetization-on"
size={60}
color="#28a745"
onPress={() =>
navigation.navigate("Home", { name: "Home" })
}
/>
<Text style={styles.iconText}>Pay Debt</Text>
</View>
</View>
<View style={styles.row}>
<View style={styles.iconSpace}>
<Icon name="person" size={60} color="#28a745" />
<Text style={styles.iconText}>Profile</Text>
</View>
<View style={styles.iconSpace}>
<Icon name="payment" size={60} color="#28a745" />
<Text style={styles.iconText}>Card Info</Text>
</View>
<View style={styles.iconSpace}>
<Icon
name="file-text-o"
size={60}
color="#28a745"
type="font-awesome"
onPress={() => navigation.navigate("Home", { name: "Home" })}
/>
<Text style={styles.iconText}>Docs</Text>
</View>
<View style={styles.iconSpace}>
<Icon name="block" size={60} color="#28a745" color="#28a745" />
<Text style={styles.iconText}>Block</Text>
</View>
</View>
<View style={styles.row}>
<View style={styles.iconSpace}>
<Icon name="search" size={60} type="font-awesome" color="#28a745" />
<Text style={styles.iconText}>Search</Text>
</View>
</View>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
alignItems: "center",
justifyContent: "space-evenly",
},
header: {
height: "20px !important",
},
welcome: {
fontSize: 35,
fontWeight: "bold",
marginBottom: 1,
marginTop: 5,
marginLeft: 0,
},
dashTitle: {
fontSize: 20,
color: "gray",
fontWeight: "bold",
marginBottom: 1,
marginTop: 2,
padding: 10,
},
lendColor: {
color: "#28a745",
borderRightColor: "gray",
borderRightWidth: 10,
},
oweColor: {
color: "crimson",
},
button: {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#28a745",
padding: 10,
width: 375,
height: 50,
marginBottom: 5,
borderRadius: 5,
},
buttonText: {
color: "white",
fontWeight: "bold",
},
row: {
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 50,
},
iconText: {
textAlign: "center",
fontWeight: "bold",
color: "gray",
},
iconSpace: {
marginLeft: 10,
marginRight: 10,
padding: 5,
},
iconAlert: {},
});
export default BorrowerDash;
您可以通过将navigation
传递给<BorrowerDash />
和<LenderDash />
来解决此问题
在Dashboard.js
中:
//...
{
!switchValue ? (
<BorrowerDash navigation={navigation} />
) : (
<LenderDash navigation={navigation} />
);
}
//...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.