React Native中MaterialTopTabNavigationOptions类型用作值的TS错误求助

问题描述 #

我在React Native中尝试创建TopTab，按照线上教程编写.tsx文件并导入所需依赖后，遇到两个问题：

• TypeScript报错：MaterialTopTabNavigationOptions only refers to a type, but is being used as a value here
• 部分已引用的导入被标记为未使用

报错代码：

import { createMaterialTopTabNavigator,
MaterialTopTabNavigationOptions,
MaterialTopTabNavigationEventMap } from '@react-navigation/material-top-tabs';
import { TabNavigationState, ParamListBase } from '@react-navigation/native';
import { withLayoutContext } from 'expo-router';

const { Navigator } = createMaterialTopTabNavigator();

export const MaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(Navigator);

export default function Layout() {
  return (
    <MaterialTopTabs>
        <MaterialTopTabs.Screen />
    </MaterialTopTabs>
  )
}

错误截图：

错误原因 #

MaterialTopTabNavigationOptions 是TypeScript的纯类型定义，不是可执行的变量或值，但你在withLayoutContext的泛型参数里错误地把它当作值来使用。另外，Expo Router的withLayoutContext不需要手动传入这些类型，Navigator本身已经携带了完整的类型信息，手动指定反而会引发类型冲突。

修复方案 #

步骤1：移除无用的类型导入 #

删掉那些未被正确使用的类型导入，只保留必要的模块：

• 移除MaterialTopTabNavigationOptions、MaterialTopTabNavigationEventMap
• 移除TabNavigationState、ParamListBase

步骤2：简化withLayoutContext调用 #

不需要手动指定泛型参数，TypeScript会自动从Navigator推导正确的类型：

修复后的完整代码：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { withLayoutContext } from 'expo-router';

// 替换成你的实际页面组件
const Tab1 = () => <></>;
const Tab2 = () => <></>;

const { Navigator } = createMaterialTopTabNavigator();

export const MaterialTopTabs = withLayoutContext(Navigator);

export default function Layout() {
  return (
    <MaterialTopTabs>
        <MaterialTopTabs.Screen name="Tab1" component={Tab1} />
        <MaterialTopTabs.Screen name="Tab2" component={Tab2} />
    </MaterialTopTabs>
  );
}

补充提示 #

• Screen组件必须传入name和component属性，这是必填项，否则会触发新的错误
• 如果需要自定义标签栏样式或屏幕选项，可以在Screen的options属性中配置，示例：

<MaterialTopTabs.Screen 
  name="Tab1" 
  component={Tab1}
  options={{ 
    title: '首页',
    tabBarLabelStyle: { fontSize: 14 }
  }}
/>

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