React Native使用react-navigation报错useTheme is not a function求解决方案

报错根因 #

你当前项目使用的是React Navigation v4版本，useTheme是React Navigation v5及以上版本才提供的Hook API，你引入的EmailAccountLoginBlock、EmailAccountRegistration等第三方业务组件内部调用了v5+的useTheme，和项目现有v4版本的导航依赖不兼容，才会触发该函数未定义的报错。

解决方案 #

方案1：升级项目导航到React Navigation v6（推荐，长期兼容） #

1. 卸载旧版导航依赖

# npm
npm uninstall react-navigation react-navigation-stack
# yarn
yarn remove react-navigation react-navigation-stack

2. 安装v6版本必需依赖

# npm
npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
# yarn
yarn add @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context

3. 适配导航代码，替换原有v4的写法，参考代码如下：

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import EmailAccountLoginBlock from '../blocks/email-account-login/src/EmailAccountLoginBlock';
import EmailAccountRegistration from '../blocks/email-account-registration/src/EmailAccountRegistration';
import ForgotPassword from '../blocks/forgot-password/src/ForgotPassword';
import VerifyAccount from '../blocks/user-profile-basic/src/screens/VerifyAccount/VerifyAccountPage';
import { getStorageData } from '../framework/src/Utilities';
// 导入原有OtherStack内的业务页面

const AuthStack = createNativeStackNavigator();
const AppStack = createNativeStackNavigator();
const RootStack = createNativeStackNavigator();

// 鉴权栈
function AuthStackScreen() {
  return (
    <AuthStack.Navigator screenOptions={{headerShown: false}}>
      <AuthStack.Screen name="EmailAccountLoginBlock" component={EmailAccountLoginBlock} />
      <AuthStack.Screen name="EmailAccountRegistration" component={EmailAccountRegistration} />
      <AuthStack.Screen name="ForgotPassword" component={ForgotPassword} />
      <AuthStack.Screen name="VerifyAccount" component={VerifyAccount} />
    </AuthStack.Navigator>
  )
}

// 业务主栈，替换为原有OtherStack内的页面配置
function AppStackScreen() {
  return (
    <AppStack.Navigator screenOptions={{headerShown: false}}>
      {/* 原有OtherStack的页面配置写在这里 */}
    </AppStack.Navigator>
  )
}

// 加载判断页
function AuthLoadingScreen({navigation}) {
  useEffect(() => {
    const bootstrapAsync = async () => {
      const userToken = await getStorageData('authToken');
      navigation.navigate(userToken ? 'App' : 'Auth');
    }
    bootstrapAsync()
  }, [navigation])

  return (
    <View style={styles.container}>
      <ActivityIndicator />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{headerShown: false}} initialRouteName="AuthLoading">
        <RootStack.Screen name="AuthLoading" component={AuthLoadingScreen} />
        <RootStack.Screen name="Auth" component={AuthStackScreen} />
        <RootStack.Screen name="App" component={AppStackScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  )
}

修改完成后删除原来的AuthStack.tsx、OtherStack.tsx即可。

方案2：不升级导航，兼容现有v4版本 #

找到所有调用了useTheme的第三方业务组件，做如下修改：

1. 删除import { useTheme } from 'react-navigation'的导入语句
2. 新增自定义模拟useTheme的Hook，匹配组件用到的主题字段：

const useTheme = () => {
  return {
    colors: {
      primary: '#2196F3',
      background: '#ffffff',
      text: '#000000',
      card: '#ffffff',
      border: '#e0e0e0',
      // 补充组件实际用到的所有颜色字段即可
    }
  }
}

收尾操作 #

修改完成后执行以下命令清空缓存重启项目，避免缓存导致的异常：

npx react-native start --reset-cache

重新打包运行即可解决报错。

内容的提问来源于stack exchange，提问作者Om Sonone