如何动态更新 React-Navigation 中的 header

Question

I am using React-Navigation v-5. I want to update the header dynamically directly from the screen but I am unable to do it. Here is my code, I am using a slightly different logic here. First I create the stack of screens in a different file name MealsNavigator.

export default function MealsNavigator() {
    const Stack = createStackNavigator();

    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Categories" component={Categories} />
                <Stack.Screen name="MealsCategory" component={CategoryMeal} />
                <Stack.Screen name="MealDetails" component={MealDetails} />
            </Stack.Navigator>
        </NavigationContainer>
  );
}

Then, I pass the props in each screen like this,

export default function CategoryMeal(props){}

Then I used this props to navigate between screens like this,

<Button title = 'Go to Meal Details!' onPress = {() => {
        props.navigation.navigate('MealDetails')
      }}/>

This works fine but when it comes to updating the header, I stuck. I don't know what to do. I want to add these things into my Category screen header

 headerTitle: 'Meal Categories',
  headerStyle: {
    backgroundColor: Colors.primaryColor  
  },
  headerTintColor:'#ffffff' 

And here is my Category screen code,

export default function Categories(props){
  const renderGridItem = (itemData) => {
    return(
      <TouchableOpacity
      style = {styles.gridItem} 
      onPress = {() => {
        props.navigation.navigate('MealsCategory', {
          categoryID: itemData.item.id,           
        })
      }}>
        <View >
          <Text>
            {itemData.item.title}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }
  return(
    <FlatList
    data = {CategoriesData}
    renderItem = {renderGridItem}
    numColumns = {2}
    />
  )
}

I already tried these options Categories.props.navigation.setOptions, props.navigation.setOptions, props.navigation.options but none of them are working.

I will be extremely thankful if someone will help me.

Answer 1

It's Done. It is needed to done like it

useLayoutEffect(() => {
  props.navigation.setOptions({
    headerTitle: 'Meal Categories',
  headerStyle: {
    backgroundColor: Colors.primaryColor  
  },
  headerTintColor:'#ffffff' 
  })
})

Thanks!