react-native - reactnavigation 堆栈可防止 android 和 safari 地址栏在 pwa 中滚动隐藏

Question

我正在使用带有 reactnavigation v6 for PWA 的 expo 将我的项目导出到网络上

我的堆栈导航是这样的

  <NavigationContainer
          ref={(c) => {
            this._NavigationContainer = c;
          }}
          theme={{ colors: { background: "#ffffff" } }}
          linking={linking}
        >
          <Stack.Navigator initialRouteName="Homenavigator">
            <Stack.Screen
              name="Homenavigator"
              component={Homenavigator}
              options={{
                header: ({ navigation, route, options, back }) => {
                  return <Header options={options} navigation={navigation} />;
                },
                headerStyle: {
                  height: 52,
                },
                headerMode:'float'
              }}
            />
          <Stack.Screen
              name="Page"
              component={Page}
              options={{
                header: ({ navigation, route, options, back }) => {
                  return (
                    <Header
                      options={options}
                      navigation={navigation}
                      pkey="page"
                    />
                  );
                },
                headerStyle: {
                  height: 52,
                },
                headerMode:'float',
              }}
            />
</Stack.Navigator>
</NavigationContainer>

当我导航到“页面”屏幕滚动工作正常，这意味着当我滚动到页面的顶部或底部时，android chrome 地址栏会自动隐藏

但是当我在 Homenavigator 屏幕上时它不会而且它总是停留

我的页面类正在呈现这样的东西

return (
      <View style={styles.container}>
        <ScrollView>{this.render_page_content()}</ScrollView>
      </View>
    );

容器的样式是

container: {
    flex: 1,
    backgroundColor: "#EFF1F5",
  },

我的 Homenavigator 类正在视图中呈现平面列表

return (
      <View style={styles.container}>
        {this.state.loading ? (
          <ActivityIndicator size="large" color="#D00A30" /> // data loading indicator
        ) : (
          <FlatList
            ref={this.props.scrollRef}
            style={styles.homewidgets}
            data={this.state.homewidgets} // widget data
            keyExtractor={(item, index) => item.type + "-" + index}
            renderItem={({ item }) => this._render_homewidget_items(item)} // render widget data
            bounces={false}
            alwaysBounceVertical={false}
            snapToOffsets={[0, 76]} // snap for searchbox
            snapToAlignment="center"
            decelerationRate={"fast"}
            snapToEnd={false}
            onScroll={(e) => this.Homewidgets_onScroll(e)} // show topbar search when snaped to search box
            onMomentumScrollEnd={(e) => this.Homewidgets_onScroll(e)} // show topbar search when snaped to search box
            stickyHeaderIndices={[1]} // make a shadow widget sticky to use as topbar shadow
          />
        )}
        <StatusBar style="auto" />
      </View>
    );

容器的样式是

container: {
    flex: 1,
    backgroundColor: "#EFF1F5",
  },

我一直在尝试解决这个问题一段时间，但我无法解决这个问题

我的 PWA 和 API 都有有效的 SSL 认证

我还在 PWA 清单中将显示设置为“全屏”，当用户安装应用程序时它工作正常，但我希望即使用户没有安装我的应用程序也能解决这个问题

这是我的依赖项

"dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",
    "expo": "^42.0.0",
    "expo-app-loading": "1.1.2",
    "expo-secure-store": "~10.2.0",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-sideswipe": "^1.5.0",
    "react-native-svg": "12.1.1",
    "react-native-web": "~0.13.12",
    "resize-observer-polyfill": "^1.5.1"
  },

编辑 我正在自己解决这个问题并注意到一些事情

• 仅当您在堆栈导航或嵌套堆栈导航中使用底部选项卡时才会出现此问题
• 从 PWA 样式中删除绝对位置并用相对替换它完全修复了问题但破坏了所有其他样式，因为没有类名来访问特定节点

如果有人遇到同样的问题并想要调试它可能很难测试，因为你需要在模拟器和安卓浏览器中运行它所以这就是我的做法

我在我的 android 模拟器上安装了带有 ADB 命令的 chrome

然后我在android模拟器中使用我的本地IP和expo端口号访问localhost

标签： react-nativeexporeact-navigationprogressive-web-apps