未定义不是 object（评估'_this.props）

Question

在 android 仿真器上运行，但undefined is not an object (evalating'_this.props) 。

大家好，我需要通过 onpress => 调用 MainScreen 的帮助，有人可以帮我看看哪里出错了

App.js 是我的第一个屏幕，MainScreen 是第二个屏幕

我使用 App 导航到主屏幕。

APP.JS

 import React, { useState, useEffect } from "react"; import { View, KeyboardAvoidingView, Image, TextInput, TouchableOpacity, Text, StyleSheet, Animated, } from "react-native"; import { CollectionList } from "./src/components/CollectionList"; import { CollectionCreate } from "./src/components/CollectionCreate"; import { MainScreen } from "./MainScreen"; import { firstScreenStack } from "./MainScreen"; function App(props) { const [offset] = useState(new Animated.ValueXY({ x: 0, y: 95 })); const [opacity] = useState(new Animated.Value(0)); useEffect(() => { Animated.parallel([ Animated.spring(offset.y, { toValue: 0, speed: 4, bounciness: 20, }), Animated.timing(opacity, { toValue: 1, duration: 550, }), ]).start(); }, []); props.navigation return ( <KeyboardAvoidingView style={styles.background}> <View style={styles.containerLogo}> <Image source={require("./assets/logoLogin.png")} /> </View> <Animated.View style={[ styles.container, { opacity: opacity, transform: [{ translateY: offset.y }], }, ]} > <TextInput style={styles.imput} placeholder="Email" autoCorrect={false} onChangeText={() => {}} /> <TextInput style={styles.imput} placeholder="Senha" autoCorrect={false} onChangeText={() => {}} /> <TouchableOpacity style={styles.btAcess} onPress={() => props.navigation.navigate(MainScreen)} > <Text style={styles.btSubText} >Acessar</Text> </TouchableOpacity> <TouchableOpacity style={styles.btCreate}> <Text style={styles.btPassText}>Criar conta</Text> </TouchableOpacity> </Animated.View> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ background: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "#a4a4a4", }, containerLogo: { flex: 1, justifyContent: "center", }, container: { flex: 1, alignItems: "center", justifyContent: "center", width: "90%", paddingBottom: 50, }, imput: { backgroundColor: "#fff", width: "90%", marginBottom: 15, color: "#222", fontSize: 17, borderRadius: 7, padding: 10, }, text: { color: "#FFF", }, btAcess: { backgroundColor: "#00a0cf", width: "90%", height: 45, alignItems: "center", justifyContent: "center", borderRadius: 7, }, btSubText: { color: "#ffff", fontSize: 18, }, btCreate: { marginTop: 8, }, btPassText: { color: "#FFF", }, }); export default App;

MainScreen.js

 import "react-native-gesture-handler"; import * as React from "react"; import { View, TouchableOpacity, Image, StyleSheet } from "react-native"; import Icon from "react-native-vector-icons/Ionicons"; import { CollectionList } from "./src/components/CollectionList"; import { CollectionCreate } from "./src/components/CollectionCreate"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import { createDrawerNavigator } from "@react-navigation/drawer"; import CustomSidebarMenu from "./CustomSidebarMenu"; const Stack = createStackNavigator(); const Drawer = createDrawerNavigator(); const NavigationDrawerStructure = (props) => { const toggleDrawer = () => { props.navigationProps.toggleDrawer(); }; return ( <View style={{ flexDirection: "row" }}> <TouchableOpacity onPress={toggleDrawer}> <Image source={{ uri: "https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png", }} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); }; export default function firstScreenStack({navigation}) { return ( <Stack.Navigator initialRouteName="FirstPage"> <Stack.Screen name="FirstPage" component={CollectionList} options={{ title: "Carfix", headerLeft: () => ( <NavigationDrawerStructure navigationProps={navigation} /> ), headerStyle: { backgroundColor: "#007AFF", }, headerTintColor: "#fff", headerTitleStyle: { fontWeight: "bold", }, }} /> </Stack.Navigator> ); } function secondScreenStack() { return ( <Stack.Navigator navigation={navigation} initialRouteName="Collection Create" screenOptions={{ headerLeft: () => ( <NavigationDrawerStructure navigationProps={navigation} /> ), headerStyle: { backgroundColor: "#007AFF", }, headerTintColor: "#fff", headerTitleStyle: { fontWeight: "bold", }, }} > <Stack.Screen name="Collection Create" component={CollectionCreate} options={{ headerShown: false, }} /> </Stack.Navigator> ); } export function MainScreen (props) { return ( <NavigationContainer> <Drawer.Navigator drawerContentOptions={{ activeTintColor: "#007AFF", itemStyle: { marginVertical: 1 }, }} drawerContent={(props) => <CustomSidebarMenu {...props} />} > <Drawer.Screen name="FirstPage" options={{ drawerLabel: "Carfix", drawerIcon: ({ focused, size }) => ( <Image source={require("./assets/homeIcon.png")} style={styles.iconStyle} /> ), }} component={firstScreenStack} /> <Drawer.Screen name="SecondPage" options={{ drawerLabel: "Camera", drawerIcon: ({ focused, size }) => ( <Image source={require("./assets/cameraIcon.png")} style={styles.iconStyle} /> ), }} component={secondScreenStack} /> </Drawer.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ sideMenuProfileIcon: { resizeMode: "center", width: 70, height: 70, borderRadius: 200 / 2, alignSelf: "center", marginTop: 100, }, iconStyle: { width: 40, height: 40, marginBottom: 4, marginLeft: 1, }, customItem: { padding: 16, flexDirection: "row", alignItems: "center", marginRight: 5, }, textSideBar: { marginTop: 9, }, });

Answer 1

在您的app.js组件上，您执行this.props.navigation... 。 你不能像那样访问组件道具。

它是一个功能组件，所以如果你想访问道具 object，

function App(props) {
  ...
  props.navigation...
}