反应本机导航错误 "navigate is undefined"

Question

我正在创建一个 React 本机应用程序，当我想在屏幕之间导航时遇到问题，它给出错误“无法读取未定义的属性 'navigate'”。我想当我按下齿轮图标时它必须导航到设置部分。我没看清楚我哪里弄错了。

设置按钮可触摸不透明度

import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import { createAppContainer} from 'react-navigation';
import PS from '../screens/PS';
import SPC from '../screens/SPC';
import TFA from '../screens/2FA';
import Login from '../screens/Login';
import Settings from '../screens/settings';

const screens = {
    Login: {
        screen: Login,
        navigationOptions: {
            header: null,
          }
    },
    TFA:{

        screen: TFA
    },
    PS: {
        screen: PS,
        navigationOptions: {
            header: null,
          }
    },
    SPC: {
        screen: SPC
    },
    Settings: {
        screen: Settings
    }
}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);


import React, {useState}from 'react';
import SettingsButton from './SettingsButton';
import ConnectionIcon from './Connectionİcon';
import { View, Image, StyleSheet } from 'react-native';

const Header = () => {

    return (
        <View style={styles.header}>
            <View style={styles.headerp1}></View>
                <View style={styles.headerp2}><Image 
                    source={require('../assets/images/monitor.png')}
                /></View>
            <View style={styles.headerp3}>
                <SettingsButton />
                <ConnectionIcon />
            </View>
        </View>
    )
}

export default Header;

// const styles here

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


const SettingsButton = ({ navigation }) => {
    return (
        <TouchableOpacity
            style={styles.headerp3v2}
            onPress={() => navigation.navigate('Settings')}
        >
            <Image style={styles.reddot}
                source={require('../assets/images/gear.png')}
            />
        </TouchableOpacity>
    )
}

export default SettingsButton;


   // const stlyes codes here

头文件在这里

import { Image, StyleSheet, Button, View, Text, SafeAreaView, StatusBar } from 'react-native';
import Footer from '../components/Footer';
import Header from '../components/Header';
import PV from '../components/PV';
export default function PS() {
    return (
        <View style={styles.container}>
            <StatusBar hidden />
            <Header />
            <View><Text style={styles.text}>All Persons</Text></View>
            <PV />
            <Footer/>
        </View>
    );
}```

Answer 1

您没有将 navigation 属性传递给 SettingsButton

您可以尝试使用 useNavigation 挂钩 https://reactnavigation.org/docs/use-navigation/ 将导航对象放入 SettingsButton

import React from 'react';
import { Image, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native'; // <-- new code


const SettingsButton = () => {
    const navigation = useNavigation(); // <-- new code

    return (
        <TouchableOpacity
            style={styles.headerp3v2}
            onPress={() => navigation.navigate('Settings')}
        >
            <Image style={styles.reddot}
                source={require('../assets/images/gear.png')}
            />
        </TouchableOpacity>
    )
}

export default SettingsButton;

反应本机导航错误 "navigate is undefined"

react native navigation error "navigate is undefined"

navigation

react-native

react-navigation