Transition 自定义标头组件 React Navigation

Question

我正在创建一个 React Native 应用程序，它应该为基本上所有屏幕都有一个自定义标题，因此我制作了一个导航栏组件，将其设置为默认标题，效果很好。尽管当我在应用程序的屏幕之间导航时，标题并未按预期进行转换。使用标准标头，当您导航到堆栈中的另一条路线时，旧标头会淡出，新标头会出现，但我的标头会自动替换。

我相信问题可能围绕着所有屏幕都有“相同”的导航栏组件，即没有为每个屏幕创建一个新的导航栏组件，所以当我导航时它只是更新导航栏的道具并重新渲染它。

这是导航器设置

应用程序.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://i.stack.imgur.com/BdvoY.jpg

默认 https://i.stack.imgur.com/2vnko.jpg

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