如何使用Expo Router在React Native项目中隐藏iOS应用程序主页指示器？

Question

我想在我的 React Native 项目中隐藏 iOS 应用程序中代表全屏模式的屏幕上的主页指示器，使用 Expo 和 Expo Router 并使用 Mac 上的 iOS 模拟器进行测试，因为我目前没有真正的 iOS设备可用。

这是适用于 Android 的方法，请参阅 Expo 导航栏：

import * as NavigationBar from "expo-navigation-bar";
...
NavigationBar.setVisibilityAsync("hidden");

Expo router在引擎盖下使用React Navigation，所以我查看了autoHideHomeIndicator堆栈屏幕选项的属性，也建议here。这似乎是 Apples prefersHomeIndicatorAutoHidden 属性的 React Native 实现。

Apple 开发文档还说：

系统会考虑您的偏好，但返回 true 并不能保证该指标将被隐藏。

我尝试在 _layout.tsx 文件中配置此属性，如下所示：

<Stack screenOptions={{ headerShown: true, autoHideHomeIndicator: true }}>
  <Stack.Screen name="fullscreen" options={{ headerShown: true, autoHideHomeIndicator: true }} />
</Stack>

或者像这样动态地在我的页面上：

<View>
  <Stack.Screen options={{ title: "Full Screen", autoHideHomeIndicator: true }} />
</View>

还使用了 headerShown 和 title 属性来测试设置属性通常是否有效。 但是，设置 autoHideHomeIndicator 属性没有效果。

我也尝试了react-native-home-indicator，但没有链接库或更改Appdelegate.m（因为对我来说太复杂了，因为我只使用Expo而不是裸露的React Native），因此得到了一个TypeError：无法读取属性'autoHidden' 为 null

以下是我的设置的一些版本：

反应本机0.72.6， 世博会 49.0.15, 世博路由器2.0.0， iOS：16.4， 模拟器：版本14.3.1 (994)

为什么主页指示器仍然显示，我需要更改什么才能隐藏它？

Answer 1

经过更多研究，我发现不可能在 iOS 上永久隐藏主屏幕指示器，以实现全屏显示并在应用程序内进行频繁的触摸交互。即使可以找到技术解决方法，应用程序在提交到应用程序商店后也存在被拒绝的风险，因为它违反了 UI 准则。

人们可以实现的最佳结果是在观看视频等内容时，在“被动”全屏上看到隐藏的主页指示器。在这种情况下，主页指示器将在没有交互的情况下几秒钟后淡出，但一旦再次触摸屏幕就会恢复。因此，在“活动”全屏的情况下，最好不要隐藏主页指示器，因为显示和隐藏它会导致用户持续分心。

对于个人用户，有一种解决方法可以通过引导访问配置暂时隐藏所选应用程序中使用会话的主页指示器。