can't import navigation screen-CodePudding

when i try to replace TabOneScreen with a custom screen name DashboardScreen

import DashboardScreen from '../screens/DashboardScreen';

it show

Module '"c:/Users/User/Projects/robinhacks/screens/DashboardScreen"' has no default export.ts(1192)

i use tab typescript in expo template https://docs.expo.dev/get-started/create-a-new-app/ here is the index.tsx file in navigation folder

/**
 * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens.
 * https://reactnavigation.org/docs/bottom-tab-navigator
 */
const BottomTab = createBottomTabNavigator<RootTabParamList>();

function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="TabOne"
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme].tint,
      }}>
      <BottomTab.Screen
        name="TabOne"
        component={DashboardScreen}
        options={({ navigation }: RootTabScreenProps<'TabOne'>) => ({
          title: 'Dashboard',
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
          headerRight: () => (
            <Pressable
              onPress={() => navigation.navigate('Modal')}
              style={({ pressed }) => ({
                opacity: pressed ? 0.5 : 1,
              })}>
              <FontAwesome
                name="info-circle"
                size={25}
                color={Colors[colorScheme].text}
                style={{ marginRight: 15 }}
              />
            </Pressable>
          ),
        })}
      />
      <BottomTab.Screen
        name="TabTwo"
        component={TabTwoScreen}
        options={{
          title: 'Tab Two',
          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}

when i try to add {}

import { DashboardScreen } from '../screens/DashboardScreen';

but it show DashboardScreen error

    Module '"../screens/DashboardScreen"' declares 'DashboardScreen' locally, but it is not exported.ts(2459)
DashboardScreen.tsx(3, 7): 'DashboardScreen' is declared here.

here is DashboardScreen.tsx file

import React from 'react'
import { Text, View} from 'react-native'
class DashboardScreen extends React.Component {
    constructor(props: any) {
        super(props)
        this.state = {}
    }
    render() {
    return <View>
        <Text>Dashboard Screen</Text>
        </View>
    }
}

i also try to add * as

import * as DashboardScreen from '../screens/DashboardScreen';

but it show component error

Type 'typeof import("c:/Users/User/Projects/robinhacks/screens/DashboardScreen")' is not assignable to type 'ScreenComponentType<RootTabParamList, "TabOne"> | undefined'.ts(2322)
types.d.ts(327, 5): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & RouteConfig<RootTabParamList, "TabOne", TabNavigationState<ParamListBase>, BottomTabNavigationOptions, BottomTabNavigationEventMap>'

here is types.tsx file

/**
 * Learn more about using TypeScript with React Navigation:
 * https://reactnavigation.org/docs/typescript/
 */

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  Root: NavigatorScreenParams<RootTabParamList> | undefined;
  Modal: undefined;
  NotFound: undefined;
};

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>;

export type RootTabParamList = {
  TabOne: undefined;
  TabTwo: undefined;
};

export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<
  BottomTabScreenProps<RootTabParamList, Screen>,
  NativeStackScreenProps<RootStackParamList>
>;

what should i do ??

https://reactnavigation.org/docs/bottom-tab-navigator/ https://reactnavigation.org/docs/typescript/

CodePudding user response：

use

export default DashboardScreen

inside Dashboardscreen.tsx