React Navigation 5 - 带有自定义标题的 createNativeStackNavigator

Question

我在 react native 应用程序上使用 React navigation 5。我尝试将 NativeStackNavigator 与自定义标题一起使用。使用 React 导航 4 可以使用，但使用 5 则不行。

反应导航4：

import { createStackNavigator } from 'react-navigation-stack';

...

const _baseNavigationOptions = (props, icon, text) => {
    return ({
      headerTitle: () => <TitleComponent  {...props} config={someConfiguration}/>,
      headerStyle: {
        backgroundColor: '#6084AD',
      },
      headerTintColor: '#FFF'
    });
  }

...
const ConsumptionStackNavigator = createStackNavigator({
    Consumption: {
        screen: Consumption,
        navigationOptions: _baseNavigationOptions({name:'bars', type: 'font-awesome'}, 'My Consumptions')
    }
}

当我尝试用 reactNavigation 5 做同样的事情时，headerTitle 不起作用：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

...

  return (
      <Stack.Navigator
        initialRouteName="Consumption"
        screenOptions={{
          headerTitleAlign: 'center'
        }}>
        <Stack.Screen
          name="Consumption"
          component={ComsumptionComponent}
          options={{ header: (props) => _baseNavigationOptions(props, {name:'bars', type: 'font-awesome'}, 'My Consumption') }}
        />
...

标题显示消耗而不是我的自定义组件。如果我尝试使用 headerRight 而不是 headerTitle，我会遇到同样的问题

你能帮我吗:)

Answer 1

您在 v4 代码中设置 navigationOptions，但在 v5 代码中设置 header。你需要设置options，而不是header：

options={(props) => _baseNavigationOptions(props, {name:'bars', type: 'font-awesome'}, 'My Consumption')}