Ошибка типа: undefined не является объектом (оценка props.navigation.navigate) - PullRequest
Новая
       20

Ошибка типа: undefined не является объектом (оценка props.navigation.navigate)

0 голосов
/ 21 апреля 2020

У меня есть значок на правой стороне моего заголовка. При нажатии я хочу перейти на другую страницу. Однако возникает ошибка. Это мой экран с иконкой: 

    import React, { Component } from 'react';

  import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';

const Login = props => {
return (
  <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity 
      onPress={() => {
        props.navigation.navigate({routeName: 'Login'});}}>
    <Image
      source={{
        uri:
          'https://clipartart.com/images/login-icon-clipart-5.jpg',
      }}
      style={{
        width: 40,
        height: 40,
        borderRadius: 40 / 2,
        marginLeft: 15,

      }}  
    />
    </TouchableOpacity>
  </View>
);
}


export default Login;

Это мой экран навигации: 

  import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer}  from 'react-navigation';
import React from 'react';

 import Homepage from './screens/Homepage';
 import Checkoutpage from './screens/Checkoutpage';
  import Filterpage from './screens/Filterpage';
 import Locationpage from './screens/Locationpage';
 import Menupage from './screens/MenuPage';
import Welcomepage from './screens/Welcomepage';
import Loginpage from './screens/Loginpage';
import Finalpage from './screens/Finalpage';
import Login from './Components/Login';


 const Navigation = createStackNavigator({
     Home:Homepage,
    Checkout: Checkoutpage,
Filter: Filterpage,
Location: Locationpage,
Menu: Menupage,
Welcome: Welcomepage,
Login: Loginpage,
Final: Finalpage
 },
 {
 defaultNavigationOptions: {
     headerRight:() => <Login/>
}
 }

);

Я новичок в реакции на родную. Так что, если вы нашли проблему, не могли бы вы объяснить подробно, чтобы я понял. Спасибо !!

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Мне кажется, что вы используете React Navigation v4.x, чтобы использовать ловушку useNavigation, вам нужно перейти на v5.x.

По умолчанию навигационная опора будет передаваться на все экраны и вы можете использовать ловушку useNavigation, как предложено @faelks (при необходимости в других компонентах).

ОБНОВЛЕНИЕ до v5.

Вот небольшой пример для v5. x версия: 

import React from 'react'
import { Button, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const Home = ({ navigation }) => (
    <View style={styles.component}>
        <Button title="Go to login" onPress={() => navigation.navigate('Login')} />
    </View>
)

const Login = ({ navigation }) => (
    <View style={styles.component}>
        <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
)

const Main = createStackNavigator()

const mainConfig = {
    // configuration for this stack
    initialRouteName: "Home",
}

export default props => (
    <NavigationContainer>
        <Main.Navigator {...mainConfig}>
            <Main.Screen name="Home" component={Home} />
            <Main.Screen name="Login" component={Login} />
            {/* Other screens for this stack */}
        </Main.Navigator>
    </NavigationContainer>
)

const styles = StyleSheet.create({
    component: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})
0 голосов
/ 21 апреля 2020

Похоже, вы ожидаете, что объект navigation будет частью реквизита, переданного вашему компоненту <Login/>. Этот объект только определен для компонентов экрана в react-navigate.

Это означает, что вам необходимо получить доступ к функциям навигации другим способом. К счастью, эта библиотека предоставляет вам useNavigation() hook . Поэтому использование этого в вашем компоненте будет выглядеть примерно так: 

// react-navigation v5+
import { useNavigation } from '@react-navigation/native';

const Login = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate({ routeName: "Login" });
        }}
      >
        <Image
          source={{
            uri: "https://clipartart.com/images/login-icon-clipart-5.jpg",
          }}
          style={{
            width: 40,
            height: 40,
            borderRadius: 40 / 2,
            marginLeft: 15,
          }}
        />
      </TouchableOpacity>
    </View>
  );
};
...