React Navigation Stack导致PWA中安卓及Safari滚动时地址栏无法隐藏

解决方案 #

方案1：精准覆盖导航容器样式（优先推荐）

根因是嵌套导航下React Navigation会给首页所在的屏幕容器设置position: absolute，导致滚动发生在容器内部，无法触发根页面滚动，安卓Chrome感知不到滚动就不会隐藏地址栏。你可以通过精准添加类名的方式仅修改首页容器的定位，不会影响其他页面样式：

1. 在应用入口处添加Web端专属样式注入逻辑：

import { Platform } from 'react-native';

if (Platform.OS === 'web') {
  const customStyle = document.createElement('style');
  customStyle.textContent = `
    /* 仅修改首页屏幕容器的定位属性，不影响其他节点 */
    .homenavigator-screen > div:first-child {
      position: relative !important;
      height: auto !important;
      min-height: 100vh;
    }
  `;
  document.head.appendChild(customStyle);
}

2. 在首页的栈屏幕配置中添加专属类名：

<Stack.Screen
  name="Homenavigator"
  component={Homenavigator}
  options={{
    className: 'homenavigator-screen', // 新增Web专属类名
    // 原有header、headerStyle等配置保持不变
  }}
/>

方案2：同步内部滚动到根页面（适配性最强）

如果不想修改样式，可以在首页FlatList的滚动回调中同步极小的滚动偏移到根窗口，触发安卓Chrome的地址栏隐藏逻辑，对原有功能无影响：
在你现有的Homewidgets_onScroll方法中新增Web端处理逻辑：

Homewidgets_onScroll = (e) => {
  // 原有吸附逻辑、顶部搜索栏显示逻辑保持不变
  if (Platform.OS === 'web') {
    const scrollY = e.nativeEvent.contentOffset.y;
    // 只要根页面有1px滚动偏移就会触发地址栏自动隐藏
    window.scrollTo(0, scrollY > 8 ? 1 : 0);
  }
}

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