React Native导航v5从头部导航到另一个屏幕。

Question

我目前正在遵循一个教程，该教程有一个旧版本的导航仪，我已经更新了代码，使用v5。我已经更新了代码，使用v5。 当移动到一个屏幕时，导航功能可用，如

const CreateScreen = ({ navigation }) => {

然后我就可以用

onPress={() => navigation.navigate("home")

谁能告诉我如何在createStackNavigator函数中公开导航功能？

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import IndexScreen from "./src/screens/IndexScreens"
import ShowScreen from "./src/screens/ShowScreen"
import CreateScreen from "./src/screens/CreateScreen"
import EditScreen from "./src/screens/EditScreen"
import { Provider} from "./src/context/BlogContext"
import { Feather } from '@expo/vector-icons';
import { EvilIcons } from '@expo/vector-icons';

const Stack = createStackNavigator();

const MyStack = () => (
    <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={IndexScreen}
            options={{
                title: 'Blog Posts',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
                headerTitleAlign: "center",
                headerRight: () => (
                    <TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
                        <Feather name="plus" size={30} />
                    </TouchableOpacity>
                )
            }}
        />
        <Stack.Screen
            name="Show"
            component={ShowScreen}
            options={{
                title: 'Blog Post Detail',
                headerTitleStyle: {
                  fontWeight: 'bold',
                },
                headerTitleAlign: "center",
                headerRight: () => (
                    <TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
                        <EvilIcons name="pencil" size={35} />
                    </TouchableOpacity>
                )
            }}
        />
        <Stack.Screen
            name="Create"
            component={CreateScreen}
            options={{
                title: 'Create A Blog Post',
                headerTitleStyle: {
                  fontWeight: 'bold',
                },
                headerTitleAlign: "center"
            }}
        />
        <Stack.Screen
            name="Edit"
            component={EditScreen}
            options={{
                title: 'Edit Blog Post',
                headerTitleStyle: {
                  fontWeight: 'bold',
                },
                headerTitleAlign: "center"
            }}
        />
    </Stack.Navigator>
);

const App = () => (
    <NavigationContainer>
        <MyStack />
    </NavigationContainer>
);

export default () => {
    return <Provider>
        <App />
    </Provider>
}

Answer 1

改变你的选项

options={{
                title: 'Blog Posts',
                headerTitleStyle: {
                    fontWeight: 'bold',
                },
                headerTitleAlign: "center",
                headerRight: () => (
                    <TouchableOpacity style={{ marginRight: 15}} onPress={() => alert('Not working need to pass navigation function')}>
                        <Feather name="plus" size={30} />
                    </TouchableOpacity>
                )
            }}

到

options={({ navigation }) => (
                { 
                    title: 'Blog Posts',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                    headerTitleAlign: "center",
                    headerRight: () => (
                        <TouchableOpacity style={{ marginRight: 15}} onPress={() => navigation.navigate("Show")}>
                            <Feather name="plus" size={30} />
                        </TouchableOpacity>
                    )
                })}

在 "显示堆栈 "界面的选项中也做同样的操作。

希望能帮到你