TypeError:(0,_native.useTheme)不是函数。（在'(0,_native.useTheme)()'中，'(0,_native.useTheme)'未定义）

html5 • • 问答

我创建了一个 drawerNavigator，现在我正在尝试向标题添加一个图标。问题是当我添加 HeaderButton 时出现此错误：

组件异常

在导航选项中，我尝试同时使用 HeaderButton 和 CustomHeaderButton 但它不起作用，我似乎无法弄清楚问题所在。

这是我的代码：

HeaderButton.js

import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = (props) => {
  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      color="black"
    />
  );
};

export default CustomHeaderButton;

欢迎屏幕.js

import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";

const WelcomeScreen = (props) => {
  return (
    <ImageBackground
      source={require("../assets/images/tsl.jpg")}
      style={styles.backgroundImage}
    >
      <Image
        source={require("../assets/images/slogan.jpg")}
        style={styles.logo}
      />
      <View style={styles.buttonContainer}>
        <MainButton
          onPress={() => {
            props.navigation.navigate({
              routeName: "UserLogin",
            });
          }}
        >
          User Login
        </MainButton>
        <MainButton
          onPress={() => {
            props.navigation.navigate({ routeName: "DriverLogin" });
          }}
        >
          Driver Login
        </MainButton>
        <View style={styles.newAccountContainer}>
          <Text style={styles.newAccountText}>Don't have an account?</Text>
        </View>
        <View style={styles.registerContainer}>
          <MainButton style={styles.registerButton}>Register now</MainButton>
        </View>
      </View>
    </ImageBackground>
  );
};

WelcomeScreen.navigationOptions = {
  headerLeft: (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
      <Item title="Menu" iconName="ios-menu" />
    </HeaderButtons>
  ),
};

谢谢！

回答

对于每个会出错的人（在Max 的课程中，视频 173 :)）：

TypeError: (0, _native.useTheme) 不是函数。（在 '(0, _native.useTheme)()' 中， '(0, _native.useTheme)' 未定义）

尝试添加npm i --save @react-navigation/native

如果没有帮助，请删除 node_modules 和 package-lock.json，检查并更新您的 package.json 到正确的版本。这是我的依赖项：

"dependencies": {
    "@expo/vector-icons": "^12.0.5",
    "@react-navigation/native": "^5.9.4",
    "expo": "40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.2",
    "react-native-web": "^0.13.12",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.0",
    "react-navigation-header-buttons": "^6.3.1",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9"

完成此操作后，只需运行npm install。

我希望它会帮助某人。学习和享受！=)

回答

我遇到了同样的问题，npm i --save @react-navigation/native因为错误指出useTheme未找到，所以我做了。

回答

嗨，我一直有这个完全相同的问题。我正在学习关于 Udemy 的 react-native 课程。

显然，这是特定于课程代码等的，但我希望这里的某些内容也可以解决您的问题。

我尝试了一些事情，所以我不确定是什么解决了这个问题……这是我所做的：

  1. 我将 package.json 中的 react-navigation 和 react-navigation-header-buttons 版本更改为 Max 代码中使用的版本（分别为 3.11.1 和 3.0.1），我想我运行了 npm install。（更新它们？）

应用程序不起作用，不会使用 react-navigation-header-buttons 启动错误

  1. 运行expo update，更新包并重新构建 node_modules 和 package-lock.json

获得了未更新的软件包列表：expo-app-loading、react-navigation、react-navigation-drawer、react-navigation-header-buttons、react-navigation-stack、react-navigation-tabs

  1. 跑了 expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs

  2. 注意到反应导航警告 v3.13.0 不支持升级到 4.x

运行npm install react-navigation@4安装 4.4.4

  1. react-navigation-header-buttons 仍然是旧版本 3.0.5，所以我跑了npm install react-navigation-header-buttons@6安装 6.3.1

  2. npm start - 应用程序正在模拟器和物理设备上运行！

我的工作应用程序现在具有以下依赖项（在 package.json 中）：

"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"

以上是TypeError:(0,_native.useTheme)不是函数。（在'(0,_native.useTheme)()'中，'(0,_native.useTheme)'未定义）的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>