reactjs - 在 React Navigation 中隐藏 header 可防止在 Web 上滚动

Question

我找遍了这个，但无法弄清楚哪里出了问题。我正在使用 React Navigation 并有一组简单的 View ，这些 View 使用堆栈导航器来点击屏幕。我还有一个嵌套的导航器，所以我可以呈现一个模态。所有这些都工作正常，但是当我设置 headerMode="none" 时，网页滚动中断。它在 iOS 上仍然可以正常工作。

我在这里做错了什么吗？ React Native/React Navigation 还是新手

这是我的代码:

type RootStackParamList = {
  LandingPage: undefined
  AirportPage: { airportID: string }
  SearchResults: undefined
}

const MainStack = createStackNavigator()
const RootStack = createStackNavigator<RootStackParamList>()

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen
        name="LandingPage"
        component={LandingPage}
        options={{ headerShown: false }}
      />
      <MainStack.Screen
        name="AirportPage"
        component={AirportPage}
      />
    </MainStack.Navigator>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <ErrorBoundary fallback={<Error />}>
        <RelayEnvironmentProvider environment={RelayEnvironment}>
          <NavigationContainer linking={linking} >
            <RootStack.Navigator mode="modal" headerMode="none" initialRouteName="LandingPage">
              <RootStack.Screen name="LandingPage" component={MainStackScreen} />
              <RootStack.Screen name="SearchResults" component={SearchResultsPage} />
            </RootStack.Navigator>
          </NavigationContainer>
        </RelayEnvironmentProvider>
      </ErrorBoundary>
      <StatusBar style="auto" />
    </View>
  )
} 

Answer 1

我也不是专家，但希望这些链接中的任何一个都会有所帮助...我认为问题是由于嵌套导航引起的。

https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

https://github.com/react-navigation/react-navigation/issues/4801