如何动态更新 React-Navigation 中的标头答案

【问题标题】：How to update header in React-Navigation dynamically如何动态更新 React-Navigation 中的标头
【发布时间】：2021-07-18 04:32:47
【问题描述】：

我正在使用 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 ，但它们都不起作用。

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

【问题讨论】：

标签： javascript react-native react-navigation react-native-navigation stack-navigator

【解决方案1】：

完成了。必须这样做

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

谢谢！

【讨论】：