Пользовательский компонент заголовка перехода React Navigation

Question

Я создаю приложение React Native, которое должно иметь настраиваемый заголовок практически для всех экранов, поэтому я создал компонент Navbar, который я установил в качестве заголовка по умолчанию, который работает нормально.Хотя, когда я перемещаюсь между экранами в приложении, заголовок не перемещается, как это должно быть.При стандартном заголовке старый исчезает, а новый - при переходе к другому маршруту в стеке, но мой просто заменяет себя автоматически.

Я считаю, что проблема может заключаться в том, что все экраны имеют«тот же» компонент Navbar, то есть не существует нового, созданного для каждого экрана, поэтому, когда я перемещаюсь, он просто обновляет реквизиты navbar и повторно отображает его.

Вот настройки навигатора

App.js

...
const stackNavigator = createStackNavigator(
{
    ...
}, {
    initialRouteName: "Home",
    defaultNavigationOptions: ({ navigation }) => ({
        header: (headerProps) => {
            return <Navbar navigation={navigation} {...headerProps.scene.descriptor.options} /> //Will pass navigationOptions as props
        },
        animationEnabled: true
    }),
    navigationOptions: {
        animationEnabled: true,
    },
    headerTransitionPreset: 'fade-in-place',
    transitionConfig: () => {
        return {
            transitionSpec: {
                duration: 2000, //Easier to see the navigation animation
            }
    }
}
);   

Компонент Navbar является обычным React.Component, наряду со всеми другими экранамикомпоненты, если это имеет какое-то значение

Есть ли какие-то реквизиты, о которых я должен позаботиться?У меня есть поиск по всей сети, особенно по документам React Navigation и API, но я не нашел никакой информации.

Вот несколько примеров того, как это выглядит с моей настраиваемой панелью навигации и как это выглядит с заголовком по умолчанию.Обратите внимание, что значение по умолчанию исчезает в течение всего перехода, в то время как мой обычай просто переключает представление в экземпляре.Единственное изменение, которое я сделал, это закомментировал header: ... часть

Пользовательский https://imgur.com/PXvm7gA

По умолчанию https://imgur.com/yk3jyr9

Answer 1

Вы можете указать любой компонент для слева и справа в заголовке в конфигурации экрана, вы можете иметь что-то вроде этого:

createStackNavigator({
  home: {
    screen: (props) => (
      <View style={{flex: 1}}>
      </View>
    ), 
    navigationOptions: () => ({
      title: `Title`,
      headerRight: (
        <React.Fragment>
          <Button title={'First'} />
          <Button title={'Second'} />
        </React.Fragment>
      )
    })
  },
});