如何動態更新 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' 
  })
})

謝謝！