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

Posted

技术标签:

【中文标题】TypeError: (0, _native.useTheme) 不是函数。 (在 \'(0, _native.useTheme)()\' 中,\'(0, _native.useTheme)\' 未定义)【英文标题】:TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)TypeError: (0, _native.useTheme) 不是函数。 (在 '(0, _native.useTheme)()' 中,'(0, _native.useTheme)' 未定义) 【发布时间】:2021-06-06 15:22:54 【问题描述】:

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

Component exception

在导航选项中,我尝试同时使用 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;

WelcomeScreen.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>
  ),
;

谢谢!

【问题讨论】:

您是否按照库文档中的OverflowMenuProvider 中的步骤进行操作?我问是因为他们说OverflowMenuProvider must be placed so that it is a child of NavigationContainer, otherwise this library may not receive the correct theme from React Navigation 听起来与您的错误非常相似 【参考方案1】:

对于每个会出错的人(在 Max 的课程中​​,视频 173:),运行以下命令:

npm install react-navigation-header-buttons@6

它会解决问题。

【讨论】:

【参考方案2】:

yarn add @react-navigation/native 或 npm i --save @react-navigation/native 应该可以解决问题。

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案3】:

“md-cart”在 ionicons 列表中不再可用,请将 iconName 替换为有效名称,例如

iconName = "cart-outline"

在我的情况下,它将开始工作!

【讨论】:

【参考方案4】:

检查 package.json 中 react-navigation-header-buttons 的依赖关系。它可能不是版本 6。如果是这种情况,则从 package.json 中删除该行并使用 npm install --save react-navigation-header-buttons@6 重新安装版本 6 的 navigation-header-button

【讨论】:

【参考方案5】:

我有同样的问题,并通过以下方式解决:

expo install react-navigation-header-buttons@6

因为npm install ...给我一个错误

【讨论】:

这解决了我的问题。 react-navigation-header-buttons 安装的版本是7。降级到6后,错误消失了,应用程序现在运行良好。【参考方案6】:

对于所有会出错的人(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。

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

【讨论】:

我遇到了同样的问题,它对我有用,谢谢【参考方案7】:

您需要转到您的 package.json 文件,并将以下版本设置为“react-navigation-header-buttons”包:

"react-navigation-header-buttons": "^6.3.1"

然后再次运行 npm install 并尝试运行您的应用。

【讨论】:

【参考方案8】:

我遇到了同样的问题,我做了npm i --save @react-navigation/native,因为错误表明找不到useTheme

【讨论】:

【参考方案9】:

您好,我也遇到了同样的问题。我正在学习 Udemy 上的 react-native 课程。

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

我尝试了一些东西,所以我不确定是什么解决了这个问题......这就是我所做的:

    我将 package.json 中的 react-navigation 和 react-navigation-header-buttons 版本更改为 Max 代码中使用的版本(分别为 3.11.1 和 3.0.1),并且我认为我运行了 npm install。 (更新它们?)

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

    运行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

    expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs

    注意到 v3.13.0 不支持升级到 4.x 的 react-navigation 警告

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

    react-navigation-header-buttons 仍然是旧版本 3.0.5,所以我运行 npm install react-navigation-header-buttons@6 installed 6.3.1

    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"

【讨论】:

非常感谢!有效。我也在学习 Max 的 React Native 课程。 嗨,克里斯。我也在 Udemy 看到了你的答案。但是快速提问,通过您的解决方案,我们可以在 EXPO 上运行我们的应用程序吗?或者它只适用于模拟器或真实设备? 我也在使用 expo,当我运行 npm start(相当于 expo start)时,服务器启动,我按 a 在 android 模拟器上运行,我在手机上有 expo 应用程序,我用它来运行应用在我的身体上。我不太确定您所说的在博览会上运行是什么意思,但如果它与此工作流程不同?

以上是关于TypeError: (0, _native.useTheme) 不是函数。 (在 '(0, _native.useTheme)()' 中,'(0, _native.useTheme)' 未定义)的主要内容,如果未能解决你的问题,请参考以下文章

TypeError: (0 , _schemaUtils.default) 不是函数

Redux Saga EventChannel: TypeError: (0, _reduxSaga.take) 不是函数

未捕获的TypeError:(0,_store.configureStore)不是函数[重复]

未捕获的 TypeError: (0 , _firebase.auth) 不是函数

JEST 测试套件无法运行:TypeError: (0 , _reactRedux.connect) 不是函数

AWS Amplify 登录错误 - 登录错误... [TypeError: (0, _getRandomBase.default) 不是函数