Expo构建PWA布局错乱，如何不修改安卓端输出调整Web端实现？

常见问题根因及修复方法 #

• 90%以上的原生端正常、Web端错位问题是样式兼容导致：Expo Web对marginVertical/paddingHorizontal这类React Native简写样式属性的polyfill存在适配漏洞，绝对定位的父级参照物规则、默认宽高填充逻辑和原生端渲染逻辑不一致，部分StyleSheet.create属性转换为CSS时单位适配出错。
  修复方法：全局替换所有垂直/水平边距简写属性为marginTop/marginBottom/paddingLeft/paddingRight完整写法，所有带定位的组件明确父容器定位属性，所有尺寸统一使用数值类型，不要额外加px等Web专属单位。
• 若使用了无Web适配的第三方原生依赖也会导致渲染异常：部分React Native社区依赖仅支持原生端，引入后会破坏Web端渲染逻辑。
  修复方法：排查项目依赖，仅在原生端引入这类依赖，Web端替换为适配Web的替代实现。

不改动原生端逻辑的Web适配方案 #

可以通过Expo内置的平台判断能力，完全保留原有安卓端逻辑，仅给Web端新增适配规则，不会影响原生端输出结果：

1. 基于Platform模块做分支判断

import { Platform, StyleSheet, View } from 'react-native';

// 样式差异化适配
const styles = StyleSheet.create({
  container: {
    // 原有原生端样式完全保留
    flex: 1,
    ...Platform.select({
      native: {
        paddingHorizontal: 20,
      },
      web: {
        // 单独给Web端写兼容样式
        paddingLeft: 20,
        paddingRight: 20,
      }
    })
  }
})

// 组件实现差异化适配
const PageContainer = (props) => {
  if (Platform.OS === 'web') {
    // Web端用自定义适配后的组件
    return <div style={{width: '100%', maxWidth: 480, margin: '0 auto'}} {...props} />
  }
  // 原生端完全保留原有组件
  return <View {...props} />
}

2. 基于文件后缀做平台隔离
   可以将同一个组件的不同平台实现分成两个文件，比如Layout.native.tsx放原生端原有逻辑，Layout.web.tsx放Web端适配后的逻辑，Expo构建时会自动根据目标平台读取对应文件，两端逻辑完全独立不会互相影响。

前置排查步骤 #

不要直接执行生产构建命令，先本地启动Web开发服务定位问题：

• 执行expo start --web启动本地Web调试服务，在浏览器开发者工具的元素面板直接查看转换后的CSS属性，快速定位错位组件的样式问题，开发环境的警告信息比生产构建包更全面。
• 若开启了PWA离线缓存，构建时添加--clear参数清空历史缓存，避免旧缓存导致的样式未更新：expo build:web --clear

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