Реагируйте Навигация 5 - createNativeStackNavigator с пользовательским заголовком - PullRequest
Новая
       66

Реагируйте Навигация 5 - createNativeStackNavigator с пользовательским заголовком

0 голосов
/ 20 февраля 2020

Я использую React Navigation 5 на реагировать родное приложение. Я пытаюсь использовать NativeStackNavigator с пользовательским заголовком. С React Navigation 4 это работает, но нет с 5.

React Navigation 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')
    }
}

Когда я пытаюсь сделать то же самое с responseNavigation 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, у меня возникнет та же проблема

Можете ли вы помочь мне:)

1 Ответ

0 голосов
/ 20 февраля 2020

Вы устанавливаете navigationOptions в коде v4, но header в коде v5. Вам нужно установить options, а не header: 

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