以前使用过几次带有React的TypeScript，没有任何问题。移到React Native，我的自定义“RoundedButton”和“Card”组件的导入都收到了这个错误：

Cannot find module '@components/Buttons/RoundedButton' or its corresponding type declarations.ts(2307)
Cannot find module '@components/Card' or its corresponding type declarations.ts(2307)

下面是./app/index. tsx文件夹。

import React from 'react';
import { View, Text } from 'react-native';
import Card from '@components/Card';
import RoundedButton from '@components/Buttons/RoundedButton';

export default function Home() {
  return (
    // Create a view the same size as the screen and center the content with a background color
    <View className="justify-center h-full">
      <Card>
        <Text className="text-2xl font-bold text-center mb-3">
          lorem ipsum
        </Text>
        <RoundedButton text="Sign Up" color="primary" onPress={() => {}} />
        <RoundedButton text="Sign In" color="secondary" onPress={() => {}} />
      </Card>
    </View>
  );
}

..../组件/卡. tsx...

import React from 'react';
import { View } from 'react-native';
import styles from '@styles/components/Card.scss';

// Add type definitions for the props
type CardProps = {
  children: React.ReactNode;
};

function Card(props: CardProps) {
  const { children } = props;
  // Return the card with the appropriate styles
  return <View className={`${styles.card}`}>{children}</View>;
}

export default Card;

...和./组件/按钮/圆形按钮.tsx

import React from 'react';
import { Pressable, Text } from 'react-native';
import styles from '@styles/components/Buttons/RoundedButton.scss';

// Add type definitions for the props
type RoundedButtonProps = {
  text: string;
  color: 'primary' | 'secondary' | 'tertiary';
  onPress: () => void;
};

function RoundedButton(props: RoundedButtonProps) {
  // Destructure the props
  const { text, color, onPress } = props;
  const buttonColor = `button-${color}`;
  const textColor = `text-${color}`;
  // Return the button with the appropriate styles
  return (
    <Pressable
      onPress={onPress}
      className={`${styles.button} ${styles[buttonColor]}`}
    >
      <Text className={`${styles.text} ${styles[textColor]}`}>{text}</Text>
    </Pressable>
  );
}

export default RoundedButton;

还有我的./tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-native",
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ESNext",
    "types": ["react-native"],
    "baseUrl": "./",
    "paths": {
      "@app": ["./app/*"],
      "@assets": ["./assets/*"],
      "@components": ["./components/*"],
      "@styles": ["./styles/*"],
      "@utils": ["./utils/*"]
    }
  }
}

我试着研究这个问题好几次了，但是没有找到一个明确的答案。除了index.tsx中下面的红色曲线'@components/Card'和'@components/Buttons/RoundedButton'之外，我在整个项目中没有其他ESLint、TypeScript或构建错误。
我不确定是否每个都需要一个types.ts，但我以前在另外两个React TypeScript项目中工作时从来没有这样做过。