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

Question

我正在使用 React-Navigation v-5。 我想直接从屏幕上动态更新 header 但我做不到。 这是我的代码，我在这里使用了稍微不同的逻辑。 首先，我在不同的文件名 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>
  );
}

然后，我像这样传递每个屏幕中的道具，

export default function CategoryMeal(props){}

然后我用这个道具在这样的屏幕之间导航，

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

这工作正常，但在更新 header 时，我卡住了。 我不知道该怎么办。 我想将这些东西添加到我的类别屏幕 header

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

这是我的类别屏幕代码，

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

我已经尝试过这些选项Categories.props.navigation.setOptions, props.navigation.setOptions, props.navigation.options但它们都不起作用。

如果有人帮助我，我将非常感激。

Answer 1

完成。 需要这样做

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

谢谢！