React导航标题道具不起作用

Question

将props传递到标头时遇到问题。每个堆栈中的组件采用在第一堆栈"中声明的值；(主页("；。我在组件中有一个开关，它必须在每个视图中呈现不同的东西。出于某种原因，当在不同的视图中在标头内执行console.log时，它总是向我抛出"的值；主视图"；。

<NavigationContainer theme={MyTheme}>
<Stack.Navigator initialRouteName="Home" >
{/* <Stack.Navigator initialRouteName="Auth"> */}
{/* Auth Navigator: Include Login and Signup */}
<Stack.Screen
name="Auth"
component={CryptoAuth}
options={{ headerShown: false }}
/>
{/* Navigation Drawer as a landing page */}
<Stack.Screen
name="Home"
component={Home}
// Hiding header for Navigation Drawer
options={{ headerTitle: (props) => <Header prop={"Home"}/> ,headerTitleAlign: 'center', headerStyle: {backgroundColor: 'black', borderBottomWidth: 0, shadowOpacity: 0, elevation: 0} }}
// options={({ route }) => ({
//   headerTitle: getHeaderTitle(route),
// })}
/>
<Stack.Screen
name="CollectionDetails"
component={CollectionDetails}
options={{ headerTitle: (props) => <Header prop={"CollectionDetails"}/>, headerTitleAlign: 'center', headerStyle: {backgroundColor: 'black', borderBottomWidth: 0, shadowOpacity: 0, elevation: 0}}}
/>
<Stack.Screen
name="NFTDetails"
component={NFTDetails}
options={{ headerTitle: (props) => <Header prop={"NFTDetails"}/>, headerTitleAlign: 'center', headerStyle: {backgroundColor: 'black', borderBottomWidth: 0, shadowOpacity: 0, elevation: 0}}}
/>
<Stack.Screen
name="Profile"
component={Profile}
options={{ headerTitle: (props) => <Header prop={"Profile"}/>, headerTitleAlign: 'center', headerStyle: {backgroundColor: 'black', borderBottomWidth: 0, shadowOpacity: 0, elevation: 0}}}
/>
</Stack.Navigator>
</NavigationContainer>

Answer 1

选项应定义为一个函数。

options={props => ({
title: $t('back'),
headerBackTestID: 'BackButton',
headerTitle: () => <HomeHeader {...props} />,
headerRight: () => <RightHeader {...props} />,
})}