Question

我在React本机应用程序上使用React导航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')}

React Navigation 5-具有自定义标头的createNativeStackNavigator

1 个答案: