Reactjs 转换自定义标题组件响应导航

我正在创建一个React本机应用程序，它应该为基本上所有屏幕都提供一个自定义标题，所以我制作了一个导航栏组件，我将其设置为默认标题，效果很好。虽然当我在应用程序中的屏幕之间导航时，标题并没有像预期的那样进行转换。使用标准标题，当您导航到堆栈中的另一条路径时，旧标题会淡出，新标题会进入，但我的标题会自动替换

我相信问题可能在于所有屏幕都有“相同”的导航栏组件，也就是说没有为每个屏幕创建一个新的导航栏组件，所以当我导航时，它只会更新导航栏的道具并重新渲染

这是导航器的设置

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

。。。
const stackNavigator=createStackNavigator(
{
...
}, {
初始路由名称：“主页”，
defaultNavigationOptions:（{navigation}）=>({
标题：（headerProps）=>{
return//将导航选项作为道具传递
},
animationEnabled：正确
}),
导航选项：{
animationEnabled：没错，
},
headerTransitionPreset:“淡入到位”，
转换配置：（）=>{
返回{
过渡规格：{
持续时间：2000，//更容易看到导航动画
}
}
}
);   

Navbar组件是一个常规的React.component，以及所有其他屏幕组件（如果有区别的话）

有什么道具我应该注意吗？我在网上搜索过，特别是React导航文档和API参考，但没有找到任何信息

下面是一些示例，展示了我的自定义导航栏的外观以及默认标题的外观。请注意，在整个转换过程中，当我的自定义只是在实例中切换视图时，默认标题会淡出。我所做的唯一更改是注释掉

标题：…

部分

定制

默认值

---

您可以在屏幕配置的标题中为左和右指定任何组件，您可以有如下内容：

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

createStackNavigator({
主页：{
屏幕：（道具）=>(
), 
导航选项：（）=>({
标题：`title`，
头灯：(
)
})
},
});

如果我理解正确，您的标题没有使用屏幕导航？如果是这种情况，请根据react navigation 5使用

headerMode='screen'

*

  <NavigationContainer>
    <Stack.Navigator initialRouteName="List" headerMode='screen'>
      <Stack.Screen name="Article" 
                    component= { Article }/>
      <Stack.Screen name="List" 
                    component= { List }/>
    </Stack.Navigator>
  </NavigationContainer>

---

标题模式设置为屏幕浏览标题，屏幕在android中很常见，如果您将标题设置为浮动，则标题将不会导航，但会更改其在ios中常见的内容。如果您不需要标题，请将其设置为无。

我在

上-navigation@5.1.3

以下内容适用于我（摘自我的代码）：

你对此有任何更新吗？我也很想知道！遇到了同样的问题。没什么，很遗憾。我已经放弃了，所以我的没有动画看起来很糟糕
<Stack.Navigator>
    <Stack.Screen
        name={"route1"}
        component={Route1View}
        options={{title: "route 1 title"}}
            />
    <Stack.Screen
        name={"route2}
        component={Route2View}
        options={({navigation, route}) =>({
            title: "route 2 title",
            header: (props) => <CustomHeader {...props} />
        })}
    />
</Stack.Navigator>