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>
                    )
                })}

对“显示堆栈”屏幕中的选项执行相同的操作。

希望这会有所帮助！

Answer 2

将navigation.navigate（“ Show”）替换为navigation.navigate（“ Create”）

React Native Navigation v5从标题导航到另一个屏幕

2 个答案: