React Navigation 5: как проложить маршрут вместе с другими опциями

Question

Я пытаюсь передать параметры навигации внутри своей навигации. js:

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

     <MealsNav.Screen
                    name="MealDetail"
                    component={MealDetailScreen}
                    options={({ route }) => {
                        const mealId = route.params.mealId;
                        const selectedMeal = MEAL.find(meal => meal.id === mealId);
                        
                        return {
                            title: selectedMeal.title
                        },
    
                        headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Favorite'
                                    iconName='ios-menu'
                                    onPress={() => console.log('Mark as the favorite')}
                                />
                            </HeaderButtons>
                        ),
                    }}
                />

Это не работает, и я не вижу, чтобы заголовок headerRight () был выделен.

Эта часть работает, хотя:

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

                return {
                    title: selectedCategory.title,
                };

            }}
        />

Мне просто нужен маршрут + другие варианты, чтобы сесть вместе.

Ошибка говорит: error: Error: Unexpected token, expected ";" (92:31)

И заголовок Право функция не выполнена, так как значок не отображается.

 headerRight: () => (

Что я здесь делаю не так?

Answer 1

стандартное решение

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={({ navigation, route }) => ({
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#000"
            />
          ),
          })
          }
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Будьте внимательны после вызова функции возврата, потому что после вызова функции возврата ничего не работает