Question

我的标题右侧有一个图标。按下后，我想转移到另一页。但是，它带有一个错误。这是我的“图标”屏幕：

    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/>
}
 }

);

我对本机很陌生。因此，如果您发现问题，请彻底解释一下，以便理解。谢谢！！

Answer 1

在我看来，您正在使用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',
    }
})

Answer 2

因此，您似乎希望navigation对象成为传递给<Login/>组件的props的一部分。该对象是react-navigate中的only defined for screen components。

这意味着您需要以其他方式访问导航功能。幸运的是，该库为您提供了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>
  );
};

TypeError：undefined不是对象（评估props.navigation.navigate）

2 个答案: