Question

我正在使用React Native，Expo和React Navigation版本5。

这是我的应用根目录。

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

const Stack = createStackNavigator();

// cannot navigate to create screen on press of header? research on sunday

function App() {
  const navigation = useNavigation();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen
          name="Index"
          component={IndexScreen}
          options={{
            title: "Blogs",
            headerRight: () => (
              <TouchableOpacity onPress={() => navigation("CreateScreen")}>
                <Feather name="plus" style={styles.icon} />
              </TouchableOpacity>
            ),
          }}
        />
        <Stack.Screen name="Show" component={ShowScreen} />
        <Stack.Screen name="Create" component={CreateScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  icon: {
    fontSize: 24,
    color: "black",
    marginRight: 15,
  },
});

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

我试图将onPress函数添加到标题中的图标。我显然无法访问应用程序根目录中的导航道具，因此我正在使用React Navigation提供的useNavigation挂钩。但是，我从Expo收到“找不到导航对象”错误。我很困惑，需要找到一种使用标题中的图标导航到CreateScreen的方法。非常感谢您提供一些帮助。

Answer 1

要使useNavigation挂钩正常工作，应在NavigationContainer中调用它。如果您的要求是使用onPress选项中的导航，则可以执行以下操作。

   options={({navigation})=>({
        title: "Blogs",
        headerRight: () => (
          <TouchableOpacity onPress={() => navigation.navigate("CreateScreen")}>
            <Feather name="plus" style={styles.icon} />
          </TouchableOpacity>
        ),
      })}

这将使您可以访问导航道具，并且可以导航到另一个屏幕。

为什么此onPress导航不起作用？

1 个答案: