Реагируй Native Navigation v5 перейти на другой экран из заголовка

Question

В настоящее время я слежу за учебником, в котором установлена ​​более старая версия навигатора. Я обновил код для использования 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>
                    )
                })}

Сделайте то же самое с параметрами на экране Показать стек.

Надеюсь, это поможет!