Expo 51.0.8配置打包器忽略.native文件的问题求助

问题分析 #

拆分introduction.native.tsx和introduction.tsx后，Web打包仍加载native组件，核心原因是打包器未正确识别平台后缀规则，或导入方式、缓存导致解析异常。

解决方案 #

1. 规范组件导入方式 #

调用组件时不要指定文件后缀，让Expo自动根据平台匹配对应文件：

// 正确导入方式
import Introduction from './introduction';

// 错误示例（禁止这么写）
// import Introduction from './introduction.native.tsx';

2. 配置Webpack解析规则 #

Expo Web默认使用Webpack，需确保它优先识别Web平台的文件后缀：

1. 生成Webpack配置文件：

   npx expo customize:web
   

2. 修改生成的webpack.config.js，添加平台后缀解析优先级：

   const createExpoWebpackConfigAsync = require('@expo/webpack-config');
   
   module.exports = async function (env, argv) {
     const config = await createExpoWebpackConfigAsync(env, argv);
     
     // 优先解析Web平台的文件后缀
     config.resolve.extensions.unshift('.web.tsx', '.web.ts', '.web.jsx', '.web.js');
     
     return config;
   };
   

3. 简化Native组件逻辑 #

拆分后无需在introduction.native.tsx中判断Web平台，直接专注原生平台逻辑：

// introduction.native.tsx 优化后
return (
  <SafeAreaView testID='safe-area-view' style={styles.flex}>
    <PagerView
      testID='pager-view'
      initialPage={0}
      style={styles.PagerView}
    >
      {data.map((d) => (
        <IntroScreen
          title={d.title}
          key={d.key}
          SvgComponent={d.SvgComponent}
          description={d.description}
          ExtraComponent={d.ExtraComponent ?? <> </>}
        />
      ))}
    </PagerView>

    <View style={styles.dotsContainer}>
      <View style={styles.dotContainer}>
        <SlidingDot
          testID="sliding-dot"
          marginHorizontal={3}
          data={data}
          scrollX={scrollX}
          dotSize={12}
        />
      </View>
    </View>
  </SafeAreaView>
);

4. 清除打包缓存 #

运行以下命令清除Expo缓存，避免旧文件残留：

npx expo start --clear

验证 #

重新启动Web打包服务：

npx expo start --web

此时Web端应正确加载introduction.tsx，不再出现Unable to resolve module ../Utilities/Platform错误。

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