我想在我的React Native项目中，在代表全屏模式的屏幕上隐藏iOS应用程序中的Home指示器，使用Expo和Expo Router并在Mac上使用iOS模拟器进行测试，因为我目前没有可用的真实的iOS设备。
以下是适用于Android的方法，参见Expo NavigationBar：
import * as NavigationBar from "expo-navigation-bar";
...
NavigationBar.setVisibilityAsync("hidden");字符串
Expo router在后台使用React Navigation，所以我查看了堆栈屏幕选项的autoHideHomeIndicator属性，也建议使用here。这似乎是苹果prefersHomeIndicatorAutoHidden属性的React Natives实现。
Apple dev docs还说：
系统会考虑您的偏好，但返回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：Cannot read property 'autoHidden'为null
以下是我的设置的一些版本：
React Native 0.72.6，Expo 49.0.15，Expo Router 2.0.0，iOS：16.4，模拟器：版本14.3.1（994）
为什么Home指示器仍然显示，我必须改变什么才能隐藏它？
1条答案
按热度按时间t30tvxxf1#
经过进一步的研究，我发现在iOS上，对于全屏和频繁的触摸交互，不可能永久隐藏Home指示器。即使可以找到技术工作，应用程序在提交到应用程序商店后也有被拒绝的风险，因为它违反了UI指南。
当观看视频等内容时，可以实现的最佳效果是在“被动”全屏上隐藏主屏幕指示符的印象。在这种情况下，主屏幕指示符将在几秒钟后淡出而不进行交互，但一旦再次触摸屏幕，则会恢复。因此，在“主动”全屏的情况下，最好不要隐藏主屏幕指示符，因为显示和隐藏它，会让使用者不断分心
对于个人用户，有一种解决方法可以通过引导式访问配置在选定应用程序中的使用会话中临时隐藏主页指示符。