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

【问题标题】：React Native: Different headers for different screens in Stack NavigatorReact Native：Stack Navigator 中不同屏幕的不同标题
【发布时间】：2020-10-01 07:11:09
【问题描述】：

我正在使用@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>
  )
}

【问题讨论】：

标签： react-native stack-navigator

【解决方案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>
  )
}

【讨论】：