使用react-navigation/react-native-screens时，长按返回按钮如何隐藏Navigate up

依赖版本 #

• @react-navigation/native: ^5.9.4
• react-native: 0.71.12
• react-native-screens: 3.19.0

解决方案 #

只需在目标页面的options配置中添加headerBackButtonMenuEnabled: false，就能禁用返回按钮的长按弹出菜单。

修改后的代码如下：

import { NativeStackNavigationProp, createNativeStackNavigator } from 'react-native-screens/native-stack'

const NowStack = createNativeStackNavigator()

<NowStack.Navigator>
  <NowStack.Screen name="main" component={NowPlayingView} options={{ headerShown: false }} />
  <NowStack.Screen
    name="queue"
    component={NowPlayingQueue}
    options={{
      title: "Now",
      headerStyle: {
        backgroundColor: colors.gradient.high,
      },
      headerTitleStyle: {
        fontSize: 18,
        fontFamily: font.semiBold,
        color: colors.text.primary,
      },
      headerHideShadow: true,
      headerTintColor: 'white',
      // 新增配置禁用长按菜单
      headerBackButtonMenuEnabled: false
    }}
  />
</NowStack.Navigator>

说明 #

headerBackButtonMenuEnabled是react-native-screens Native Stack提供的配置项，默认值为true，设置为false后，长按返回按钮就不会再弹出“Navigate up”的提示框。

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