Question

我有一个“作业详细信息”屏幕，其中加载了作业的详细信息，该屏幕位于嵌套在堆栈导航器下方的顶部选项卡导航器下方。由于堆栈导航器具有标题，因此我想要一个动态标题，根据加载的作业进行更改。请参考图片以了解清晰度。我是新来的本地人，所以在绕线工作时遇到了麻烦。我也使用React Navigation v5。

“作业详细信息”屏幕是加载数据的位置，之后，我想更改父导航器的标题以显示作业标题

Image of the current working of app. < Job title> represents the title which I want to make dynamic through one of the nested screens.

这是我的Stack Navigator的代码，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>
);

从嵌套顶部选项卡访问父堆栈导航器路由，以在堆栈导航器的标题上具有动态标题

0 个答案: