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

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

1 个答案: