React Native：Stack Navigator 中不同屏幕的不同标题

Question

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

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。这会将标题的控制移动到每个屏幕。然后对每个单独的屏幕使用如下所示的语法。

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>
  )
}