React Native + TypeScript自定义路径导入组件失败的解决方法

问题场景 #

组件存放路径为./src/components/CustomButton/index.tsx时，使用tsconfig定义的自定义路径import CustomButton from '@components/CustomButton'导入会报错；但将组件直接保存为/components/CustomButton.tsx，使用相对路径import CustomButton from '../components/CustomButton.tsx'导入则正常运行。

解决方案 #

1. 修正tsconfig.json路径配置 #

当前tsconfig的paths配置存在路径格式问题，冗余的通配符还可能引发冲突，修改如下：

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    // 保留原有其他配置项
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@api/*": ["apiActions/*"],
      "@context/*": ["Context/*"],
      "@interfaces/*": ["Interfaces/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js"
  ]
}

说明：baseUrl已设为./src，因此paths中的目标路径无需添加开头斜杠，直接写相对src的路径即可；移除@*通配符避免覆盖其他别名配置。

2. 配置Metro Bundler支持别名 #

React Native的Metro打包器不会自动读取tsconfig的路径配置，需在metro.config.js中手动配置别名：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@api': path.resolve(__dirname, 'src/apiActions'),
      '@context': path.resolve(__dirname, 'src/Context'),
      '@interfaces': path.resolve(__dirname, 'src/Interfaces'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
});

3. 优化组件TypeScript类型（可选但推荐） #

将组件props的any类型替换为明确的TypeScript类型，提升代码健壮性：

import { Button, ButtonProps } from 'native-base';

type CustomButtonProps = ButtonProps & {
  dark?: boolean;
  bold?: boolean;
  mt?: number | string;
};

const CustomButton = ({
  children,
  dark = false,
  onPress,
  isDisabled,
  bold = false,
  isLoading,
  mt,
  ...rest
}: CustomButtonProps) => (
  <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}
    {...rest}
  >
    {children}
  </Button>
);

export default CustomButton;

4. 重启服务并清除缓存 #

修改配置后，必须重启开发服务并清除缓存以生效：

# 清除Metro缓存
npx react-native start --reset-cache
# 重新运行Android项目
npx react-native run-android
# 或重新运行iOS项目
npx react-native run-ios

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