React Native、Expo与Solito平台文件解析及扩展、类型问题咨询

1. 平台扩展名的可访问性与自定义（添加*.admin.ts） #

Expo（及Solito）的平台文件解析核心依赖Metro bundler的资源解析规则，这套机制完全可配置：

• 底层逻辑：Metro会根据当前运行平台（web/ios/android/node），自动优先匹配带对应后缀的文件（比如web环境优先加载.web.ts，原生环境优先加载.native.ts/.ts）。默认的平台后缀包括web、native、ios、android。
• 添加自定义*.admin.ts的步骤：
  1. 修改metro.config.js，在resolver配置中添加admin到平台后缀列表，并更新可解析的文件扩展名：

     const { getDefaultConfig } = require('expo/metro-config');
     const config = getDefaultConfig(__dirname);
     
     config.resolver.platforms = [...config.resolver.platforms, 'admin'];
     config.resolver.sourceExts.push('admin.ts');
     
     module.exports = config;
     

  2. 配置tsconfig.json，让TypeScript识别该扩展名并正确解析类型：

     {
       "compilerOptions": {
         "paths": {
           "*": ["*", "*.admin.ts"]
         },
         "include": ["**/*.ts", "**/*.admin.ts"]
       }
     }
     

  3. 针对Node.js环境（admin场景），可通过环境变量切换Metro的平台解析优先级，比如启动时指定PLATFORM=admin，并在metro配置中根据环境动态调整平台顺序。

完成后即可在Node.js代码中导入*.admin.ts文件，共享Firebase相关类型定义，同时不影响web/原生端的正常解析。

2. 避免.web.ts与.ts的TypeScript类型歧义 #

TypeScript本身不会自动识别Expo的平台优先级，需通过配置对齐Metro的解析逻辑来消除类型歧义：

• 核心配置思路：为不同平台单独配置tsconfig文件，让编辑器/TypeScript根据当前环境加载对应规则：
  1. 创建tsconfig.web.json和tsconfig.native.json，分别设置路径映射：
     • tsconfig.web.json：

       {
         "extends": "./tsconfig.json",
         "compilerOptions": {
           "paths": {
             "*": ["*.web.ts", "*"]
           }
         }
       }
       

     • tsconfig.native.json：

       {
         "extends": "./tsconfig.json",
         "compilerOptions": {
           "paths": {
             "*": ["*.native.ts", "*"]
           }
         }
       }
       

  2. 在编辑器（如VS Code）中，通过工作区设置指定当前环境对应的tsconfig文件。比如web开发时切换到tsconfig.web.json，原生开发时切换到tsconfig.native.json。
• 额外技巧：若需在单个文件中明确指定导入目标，可直接使用完整扩展名（比如import foo from './foo.web.ts'），但不推荐——这会破坏跨端代码的统一性。

通过以上配置，TypeScript会严格按照当前平台的优先级解析文件类型，避免编辑器Lint出现类型歧义。

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