导航，不适用于拉取功能

Question

我会尽力解释这一点，我还是新手，很难理解术语。

我正在开发一个 react native 项目。我创建了两个文件。一个 Header.js 和一个 footer.js。

我已成功将它们拉入我的主屏幕。然而，footer.js 中的按钮不再触发。我明白了； undefined 不是错误的对象（评估“navigation.navigate”）。

如何恢复该功能？

非常感谢任何帮助。这是我的帮助项目； 应用.js

import React from 'react';
import TabNavigator from "./assets/component/TabNavigator";
import {StackNavigation} from "./assets/component/StackNavigation";


export default function App() {
    return (
       <StackNavigation/>
    );
}

StackNavigation.js;

import React from 'react';
import { HomeScreen} from "../Screens/HomeScreen";
import LayoutProps from "../Screens/Layout Props";
import SampleViewProps from "../Screens/SampleViewProps";
import {NavigationContainer} from "@react-navigation/native";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
// import ShareExample from "./assets/component/SBShare";

const Stack = createNativeStackNavigator();

export function StackNavigation() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen}/>
                <Stack.Screen name="Layout Props" component={LayoutProps} />
                <Stack.Screen name="View Props" component={SampleViewProps} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

HomeScreen.js;

import React from 'react';
import {Button, View, SafeAreaView, StyleSheet} from 'react-native';
import HeaderSB from "../component/SBHeader";
import FooterSB from "../component/SBFooter";

// import ShareExample from "./assets/component/SBShare";

export function HomeScreen({navigation}) {

    const receiveValue = (value) => {
        console.log("value received from B", value)
    }

    return (
        <>
            <SafeAreaView style={styles.container}>
                <View style={styles.headerContainer}>
                    <HeaderSB receiveValue={receiveValue}>
                    </HeaderSB>
                </View>
                <View style={styles.mainContent}>
                    <View style={styles.buttonBox}>
                        <Button onPress={() => navigation.navigate('Layout Props')} title="Layout Props"/>
                        <Button onPress={() => navigation.navigate('View Props')} title="View Style Props"/>
                    </View>
                </View>
                <View styles={styles.footerContainer}>
                    <FooterSB receiveValue={receiveValue}>
                    </FooterSB>
                </View>

            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "space-between",
    },
    headerContainer: {

    },
    mainContent: {

    },
    buttonBox: {}
    ,
    footerContainer: {

    },
});

页脚.js;

import * as React from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {AntDesign, Feather} from "@expo/vector-icons";
import {StackNavigation} from "./StackNavigation";

const FooterSB = ({navigation}) => {
    return (
        <>
            {/* Bottom App Navigation */}
            <View style={footerStyle.navCon}>
                <View style={footerStyle.navBar}>

                    {/* Home Button */}
                    <TouchableOpacity style={footerStyle.home} onPress={() =>
                        navigation.navigate('Home')}
                    >
                        {/* Icon */}
                        <AntDesign name="home" size={50} color="white"/>
                    </TouchableOpacity>

                    {/* Navigation Divider */}
                    <View style={footerStyle.navDivider}/>

                    {/* Setting Button */}
                    <TouchableOpacity style={footerStyle.settings} onPress={() =>
                        navigation.navigate('Layout Props')}
                    >
                        {/* Icon */}
                        <Feather name="settings" size={50} color="white"/>
                    </TouchableOpacity>
                </View>
            </View>
        </>

    );
}

const footerStyle = StyleSheet.create({
    navCon: {
        flex: 1,
        marginTop: 20,
        alignItems: "center",
        justifyContent: "flex-end"
    },
    navBar: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        alignItems: "center",
        backgroundColor: "#808080",
        width: 500,
        height: 50,
    },
    home: {
        // paddingHorizontal: 55,
    },
    navDivider: {
        backgroundColor: "#FFF",
        width: 4,
        height: 50,
    },
    settings: {
        // marginRight: 107,
        // paddingHorizontal: 55,
    },
});

export default FooterSB;

Answer 1

如果您想将导航作为默认道具，则应将其添加为 <Stack.Screen>，但由于 FooterSB 是自定义和单独的组件，它不会自动使用导航道具包装。

您需要将导航作为道具传递给它，所以在下面进行更改

<FooterSB receiveValue={receiveValue}>
</FooterSB>

到

<FooterSB receiveValue={receiveValue} navigation={navigation}>
</FooterSB>

您也可以将导航传递给标题。