react-native 绝对路径 配置（./绝对路径获取文件报错问题）

第一步需要安装第三方插件支持绝对路径: babel-plugin-module-resolver

命令行输入：

// yarn
 yarn add babel-plugin-module-resolver
// npm
npm install --save-dev babel-plugin-module-resolver

第二部配置根目录下babel.config.js 两种方法任选其一

第一种babel.config.js：

plugin: [
    'module-resolver',
    {
      root: ['./src'], // 从哪个文件开始设置绝对路径
      alias: {
        '@/utils': './src/utils', // 别名
      },
    },
  ],

第二种babel.config.js：大家只需要音频plugins 配置 以及fs引入；

const { readdirSync } = require('fs');

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        // 那个文件开始设置绝对路径
        root: ['./src'],
        // 别名配置
        alias: {
          ...readdirSync('./src', { withFileTypes: true }).reduce(
            (res, entry) => {
              let key = entry.name;
              if (!entry.isDirectory()) {
                // remove extension
                const parts = entry.name.split('.');
                parts.pop();

                key = parts.join('');
              }

              return {
                ...res,
                [key]: `./src/${entry.name}`,
              };
            },
            {},
          ),
        },
      },
    ],
  ],
};

第三步配置tsconfig.json

对应第一种：tsconfig.json

// 设置模块解析基础目录：解析非绝对路径模块名时的基准目录
"baseUrl": "./src",           
       // 模块路径映射：一系列映射规则，将导入路径重定向到相对于 "baseUrl" 的查找位置  
    "paths": {
      "@/assets/*": ["assets/*"],
      "@/components/*": ["components/*"],
      "@/config/*": ["config/*"],
      "@/models/*": ["models/*"],
      "@/navigator/*": ["navigator/*"],
      "@/pages/*": ["pages/*"],
      "@/utils/*": ["utils/*"]
    },    

对应第二种：tsconfig.json

"baseUrl": "./",
"paths": {                                           
      "*": ["src/*"],
    },

关闭所有命令行，重启项目npm run android 或 yarn android