Reactjs 反应本机：使用导航选项将参数传递到不同的屏幕

我正在尝试将标题设置为传递的参数

基本上我有两个文件在通信

Categories.js:

import { CATEGORIES } from '../data/dummy-data';

const CategoriesScreen = props => {

    const renderGridItem = itemData => {
        return (
            <TouchableOpacity onPress={() => {
                props.navigation.navigate('CategoryMeals', { categoryId: itemData.item.id });
            }} >
                <View style={styles.gridItem}>
                    <Text>{itemData.item.title}</Text>
                </View>
            </TouchableOpacity>
        );
    };

请关注以下代码：

CategoryMealsScreen.navigationOptions = navigationData => {
        const catId = props.route.params.categoryId;
        const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
    
        return { 
            headerTitle: selectedCategory.title
         }
    };

在这里，我试图使用

navigationOptions

从虚拟数据中提取标题，将其用作标题，但它不起作用。它根本不会更改标题标题

我错过了什么？我怎样才能解决这个问题

PS.我正在使用React导航版本5

编辑：我在MealsNavigator.js文件中组织所有导航，然后在App.js文件中呈现所有导航：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

import Colors from '../constants/colors';

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <NavigationContainer>
            <MealsNav.Navigator
                screenOptions={{
                    headerStyle: {
                        backgroundColor: Colors.primaryColor,
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontSize: 17
                    }
                }}
            >
                <MealsNav.Screen
                    name="Categories"
                    component={CategoriesScreen}
                    options={{
                        title: 'Meals Categories'
                    }}
                />
                <MealsNav.Screen name="CategoryMeals" component={CategoryMealsScreen} />
                <MealsNav.Screen name="MealDetail" component={MealDetailScreen} />
            </MealsNav.Navigator>
        </NavigationContainer>
    );
};

export default MealsNavigator;

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“../screens/CategoriesScreen”导入分类屏幕；
从“../screens/CategoryMalsScreen”导入CategoryMalsScreen；
从“../screens/MealDetailScreen”导入MealDetailScreen；
从“../constants/Colors”导入颜色；
const MealsNav=createStackNavigator（）；
const MealsNavigator=（）=>{
返回(
);
};
导出默认MealsNavigator；

对于导航版本5，您可以执行以下操作 创建堆栈时，可以提供以下选项

<Stack.Screen
    name="CategoryMealsScreen"
    component={CategoryMealsScreen}
    options={({ route }) => {
      const catId = route.params.categoryId;
      const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);

      return {
        title: selectedCategory.title,
      };
      
    }}
  />

{
const catId=route.params.categoryId；
const selectedCategory=CATEGORIES.find（（cat）=>cat.id==catId）；
返回{
标题：selectedCategory.title，
};
}}
/>

更新

您可以使用如下静态选项

<Stack.Screen
  name="CategoryMealsScreen"
  component={CategoryMealsScreen}
  options={CategoryMealsScreen.navigationOptions}
/>;

；

这能在同一个文件上工作吗？因为基本上我有一个不同的导航文件。这是在你设置导航的地方，通常是app.js文件，但从同一个文件设置的方法是使用useffect中的navigation.setOptions，这将使事情变得复杂。这对我来说不起作用。想知道是否有像

CategoryMealsScreen.js

中的代码这样的选项，我可以在其中使用类并从中提取参数。第二个选项应该与类组件及其标题（而不是标题）一起使用，你能试试吗？是的。谢谢我会把这个留着备查。

<Stack.Screen
  name="CategoryMealsScreen"
  component={CategoryMealsScreen}
  options={CategoryMealsScreen.navigationOptions}
/>;