React Native 5 向标题元素类型添加按钮无效答案

【问题标题】：React Native 5 Adding a button to the header Element type is invalidReact Native 5 向标题元素类型添加按钮无效
【发布时间】：2021-01-12 09:28:35
【问题描述】：

我正在学习 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 选项的函数返回单个元素时它可以工作，如果它是嵌套的，我得到了错误。

这是具有单个元素的完整工作代码：

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

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

谢天谢地VS代码，原来确实是导入错误。在这种情况下，TouchableOpacity 不应从“react-native”导入，而应从“react-native-gesture-handler”导入。

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

【讨论】：