如何在 React 导航中更改 Header 标题组件

Question

I am Using Product Search Component In Header Of EmptyPage, It works Fine. Now My Req is to change the Header Title Component Dynamically, If i come From DiagnosticSearch Page I need The Header Title Component Should Be, How to change it Dynamically???

      <Stack.Screen name='EmptyPage' component={EmptyPage} options={{ headerShown:true,headerTitle: () => <ProductSearch/>}}/>

Answer 1

I would do it in the EmptyPage screen component, create:

export const screenOptions = navData => {
  const title = navData.route ? navData.route.params : null
  return {
    headerTitle: title,
}

and inside the function of EmptyPage

useEffect(() => {

      props.navigation.setParams({ title:theUpdatedTitle })
   
  }, [theUpdatedTitle])

now in the navigation:

<Stack.Screen name='EmptyPage' component={EmptyPage} options{importedScreenOptions}/>

hope this helps you