如何在React-Navigation中动态更新头部

Question

我使用的是React-Navigation v-5。我想直接从屏幕上动态更新标题，但我无法这样做。这是我的代码，我在这里使用了一个稍微不同的逻辑。首先，我使用不同的文件名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')
      }}/>

这可以很好地工作，但是当涉及到更新头部时，我就卡住了。该怎么办呢。我想将这些内容添加到我的类别屏幕标题中

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

谢谢!