React Native 5 添加按钮到 header 元素类型无效

Question

我正在学习 Udemy 中的 React Native 课程，并尝试直接使用 React Native 5 进行操作。我到达了 this lesson 我们想要在 headerRight 属性中添加按钮的位置。

按照 React Navigation 5 指南，我将其添加到 Stack.Screen 元素 Stack.Screen element 但出现以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我已经在 slack 上检查了其他问题，这个错误通常出现在括号导入有误时，这似乎是我的情况，因为当函数传递给 headerRight 选项 returns 单个元素时它起作用了如果它是嵌套的，我会得到错误。

这是包含单个元素的完整工作代码：

import React from "react";
import {
  NavigationContainer,
  DefaultTheme,
  TouchableOpacity,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import IndexScreen from "./src/screens/IndexScreen";
import { Provider as BlogProvider } from "./src/context/BlogContext"; // This is inside brackets becasue we don't use the 'default' in export
import ShowScreen from "./src/screens/ShowScreen";
import CreateScreen from "./src/screens/CreateScreen";
import { Feather } from "@expo/vector-icons";

const Stack = createStackNavigator();

function LogoTitle() {
  return (
      <Feather name="plus" size={30} />
  );
}

function MyStack() {
  return (
    <Stack.Navigator screenOptions={{ title: "Blogs" }}>
      <Stack.Screen
        name="Index"
        component={IndexScreen}
        options={{ headerRight: () => <LogoTitle /> }}
      />
      <Stack.Screen name="Show" component={ShowScreen} />
      <Stack.Screen name="Create" component={CreateScreen} />
    </Stack.Navigator>
  );
}

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: "#FFF",
  },
};

export default function App() {
  return (
    <BlogProvider>
      <NavigationContainer theme={MyTheme}>
        <MyStack />
      </NavigationContainer>
    </BlogProvider>
  );
}

当我将 LogoTitle 函数更改为以下代码时出现错误，

function LogoTitle() {
  return (
    <TouchableOpacity onPress={() => console.log('pressed')}>
      <Feather name="plus" size={30} />
    </TouchableOpacity>
  );
}

Answer 1

谢天谢地VS code，结果果然是导入错误。在这种情况下，TouchableOpacity 不应从“react-native”导入，而应从“react-native-gesture-handler”导入。

import { TouchableOpacity } from "react-native-gesture-handler";

React Native 5 添加按钮到 header 元素类型无效

React Native 5 Adding a button to the header Element type is invalid

reactjs

react-native

react-native-navigation