Доступ к маршруту навигатора родительского стека из вложенной верхней вкладки, чтобы иметь заголовок c в заголовке навигатора стека - PullRequest
Новая
       51

Доступ к маршруту навигатора родительского стека из вложенной верхней вкладки, чтобы иметь заголовок c в заголовке навигатора стека

0 голосов
/ 11 июля 2020

У меня есть экран сведений о задании, где загружаются сведения о задании, он находится под навигатором верхней вкладки, который вложен под навигатор стека. Поскольку навигатор стека имеет заголовок, я хочу иметь динамический c заголовок, который меняется в зависимости от загруженного задания. Пожалуйста, обратитесь к изображению для ясности. Я новичок, чтобы реагировать на родной язык, поэтому у меня проблемы с маршрутом. Также я использую реагирующую навигацию v5.

Экран сведений о задании - это место, где загружаются данные, после чего я хочу изменить заголовок родительского навигатора для отображения названия должности

Изображение текущей работы приложения. <Название должности> представляет заголовок, который я хочу сделать динамическим c через один из вложенных экранов.

Это код для моего навигатора стека, jobDetailsNavigator - это компонент, который содержит верхнюю вкладку внутри экрана стека. 

<Stack.Navigator
        screenOptions={{
            headerStyle: { backgroundColor: theme.primaryBackground },
            headerTitleStyle: { color: theme.primaryHeading },
            headerStatusBarHeight: 5,
            headerTintColor: theme.primaryHeading,
            headerShown: true,
        }}>
        <Stack.Screen
            name='Search'
            component={SearchScreen}
            options={{ animationTypeForReplace: "pop" }}
        />
        <Stack.Screen
            name='jobScreenForId'
            component={jobDetailsNavigator}
            options={{ animationTypeForReplace: "pop",title:"< JOB TITLE >" }}
        />
    </Stack.Navigator>

Приведенный ниже код представляет навигатор верхней вкладки, на котором есть экран сведений о задании. 

function jobDetailsNavigator() {
const { theme } = useTheme();
return (
    <TopTab.Navigator
        tabBarOptions={{
            activeTintColor: theme.cbrexOrange,
            pressColor: theme.cbrexOrange,
            pressOpacity: 0.1,
            labelStyle: { fontWeight: "bold" },
            style: { backgroundColor: theme.bgLayer0 },
            indicatorStyle: {
                borderColor: theme.cbrexOrange,
                borderBottomWidth: 5,
            },
            tabStyle: { width: 120 },
        }}>
        <TopTab.Screen
            name='JobDetailsScreen'
            options={{ title: "Job Details" }}
            component={JobDetails}
        />
        <TopTab.Screen name='CTalk' component={JobCTalk} />
    </TopTab.Navigator>
);
...