当我的组件在./src/components/CustomButton/index.tsx中并且使用tsconfig中定义的路径时，我在导入组件时遇到问题。
但是，当我保存它不是在index.tsx和不使用目录，而只是在/components/CustomButton.tsx，然后import CutomButton from '../components/CustomButton.tsx'一切工作正常。
如何使第一版正常工作？
导入错误：enter image description here
自定义按钮索引.tsx

import {Button} from 'native-base';

const CustomButton = ({
  children,
  dark,
  onPress,
  isDisabled,
  bold,
  isLoading,
  mt,
}: any) => (
  <Button
    _text={{
      color: `${dark ? 'white' : 'black'}`,
      fontWeight: `${bold ? 'bold' : 'normal'}`,
      fontSize: 16,
    }}
    bg={dark ? 'muted.20' : 'muted.10'}
    colorScheme="muted"
    onPress={onPress}
    isDisabled={isDisabled}
    isLoading={isLoading}
    style={{borderRadius: 10}}
    p="4"
    mt={mt}>
    {children}
  </Button>
);

export default CustomButton;

配置

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": false,
    "jsx": "react-native",
    "allowJs": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "declaration": true,
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src",
    "paths": {
      "@*": ["/*"],
      "@api/*": ["/apiActions/*"],
      "@components/*": [
        "/components/*"
      ],
      "@context/*": [
        "/Context/*"
      ],
      "@interfaces/*": [
        "/Interfaces/*"
      ],
      "@utils/*": [
        "/utils/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
  ]
}

如何使第一个版本正常工作？我已经搜索了很多在这里和其他网页，但我没有找到答案