React Native：Stack Navigator 中不同屏幕的不同 headers

Question

我正在使用 @react-navigation/stack 版本 ^5.5.1。我试图在堆栈导航的不同屏幕上使用不同的 header。例如，在 Master 上，我不想要 header，即 headerMode="none"；在 Home，我想要自定义 header，在 Details，我想要不同的自定义 header。我如何实现这一目标？这是我当前的代码：

const AppStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Master" component={ Master } />
        <Stack.Screen name="Home" component={ Home } />
        <Stack.Screen name="Details" component={ Details } />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Answer 1

我刚刚弄明白了。

首先，将headerMode="screen"放在Stack.Navigator上。这会将 header 的控制移动到每个屏幕。然后对每个单独的屏幕使用如下所示的语法。

const AppStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="screen">
        <Stack.Screen name="Master" component={ Master } options={{ headerShown: false }} />
        <Stack.Screen name="Home" component={ Home } options={{ headerTitle: props => <MyCustomHeader {...props} /> }}/>
        <Stack.Screen name="Details" component={ Details } options={{ headerTitle: props => <MyOtherCustomHeader {...props} /> }}/>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

React Native：Stack Navigator 中不同屏幕的不同 headers

React Native: Different headers for different screens in Stack Navigator

react-native

stack-navigator