× TypeError: Cannot read property 'navigate' of undefined on React-Native expo react-navigation 5.xx

Question

如果有人可以帮助我。 我确定我错过了一些东西，但我看不到它。我正在尝试在 3 个组件之间进行导航，并使用 react-navigation 页面中的文档创建它，我尝试了很多不同的方法来做它，但总是收到相同的答案，所以如果有人能看到我做的错误，请告诉我。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Header from './app/components/header/header'
import Main from './app/components/main/main';

import Data from './app/components/data/data';
import Grafic from './app/components/grafic/grafic';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ButtonImage from './app/components/buttonImag/buttonImg'
import 'react-native-gesture-handler';


const Stack = createStackNavigator();

function MainScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Main')} heightV={40} widthV={40} itemImage={require('./app/resourse/home.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};
function DataScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Data')} heightV={40} widthV={40} itemImage={require('./app/resourse/datalist.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};
function GraficScreen({ navigation }) {
    return (
        <ButtonImage onPress={() => navigation.navigate('Grafic')} heightV={40} widthV={40} itemImage={require('./app/resourse/grafic.png')} heightI={33} widthI={33} ></ButtonImage>
    );
};

const Footer = ({ navigation }) => {

    return (
        <View style={styles.header}>
            <View style={styles.buttonPos}>
                <MainScreen />
                <DataScreen />
                <GraficScreen />
            </View>
        </View>
    )

};

function MyStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Main" component={() => <Main />} />
            <Stack.Screen name="Data" component={() => <Data />} />
            <Stack.Screen name="Grafic" component={() => <Grafic />} />
        </Stack.Navigator>
    );
}

const App = () => {


    return (
        <View style={{ flex: 1 }}>
            <Header />

            <NavigationContainer>
                <MyStack />
            </NavigationContainer>
            <Footer />
        </View>
    );

}

const styles = StyleSheet.create({

    header: {

        backgroundColor: "#00BFFF",
        height: 55

    },

    buttonPos: {
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        padding: 7

    },

    conection: {
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between",
        padding: 7
    }



});

export default App 

Answer 1

您需要做的是使用选项卡导航器。 react-navigation v5 有 3 种方法可以做到这一点：

createBottomTabNavigator

createMaterialBottomTabNavigator（非常容易自定义）

createMaterialTopTabNavigator (with tabBarPosition: 'bottom')

您还可以通过阅读文档来自定义选项卡。

我使用最后一个选项为您做了一个基本示例：

import { SafeAreaView, View, Text, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { createStackNavigator } from '@react-navigation/stack'

const Header = () => <View style={styles.header}><Text>Header title</Text></View>
const Main = () => <View style={styles.component}><Text>Main component</Text></View>
const Data = () => <View style={styles.component}><Text>Data component</Text></View>
const Grafic = () => <View style={styles.component}><Text>Grafic component</Text></View>

const footerConfig = {
    tabBarPosition: 'bottom',
}

const Tabs = createMaterialTopTabNavigator()

const MyFooter = () => (
    <Tabs.Navigator {...footerConfig}>
        <Tabs.Screen name="Main" component={Main} />
        <Tabs.Screen name="Data" component={Data} />
        <Tabs.Screen name="Grafic" component={Grafic} />
    </Tabs.Navigator>
)

const stackConfig = {
    headerMode: 'none',
}

const Stack = createStackNavigator()

const MyStack = () => (
    <Stack.Navigator {...stackConfig}>
        <Stack.Screen name="Tabs" component={MyFooter} />
    </Stack.Navigator>
)

export default () => (
    <SafeAreaView style={styles.main}>

        <Header />

        <NavigationContainer>
            <MyStack />
        </NavigationContainer>

    </SafeAreaView>
)

const styles = StyleSheet.create({
    main: {
        flex: 1,
    },
    header: {
        height: 64,
        width: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    component: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

编辑：

您可以在组件中使用 useNavigation 挂钩。如果你想使用你当前的配置。 https://reactnavigation.org/docs/use-navigation/useNavigation

另外为了向组件发送导航道具：

<Stack.Screen name="Main" component={() => <Main />} />

应该变成：

<Stack.Screen name="Main" component={Main} />
// or 
<Stack.Screen name="Main" component={props => <Main {...props} />} />