Question

我想将当前选项卡的名称传递给屏幕的headerTitle。这是我从reactnavigation.org网站获得的一种设置。这是我的代码设置。

const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();

这些是我的标签页。

function Tabs() {
    const { colors } = useTheme();
    const theme = useTheme();
    return (
        <Tab.Navigator
            initialRouteName="Home"
            activeTintColor='#fff'
        >
            <Tab.Screen
                name="Home"
                component={Home}
                options={{
                    tabBarLabel: 'Home',
                    tabBarColor: colors.tab,
                    tabBarIcon: ({ color }) => (
                        <Ionicons name="ios-home" color={color} size={26} />
                    ),
                    tabBarBadge: 5,
                }}
            />
            <Tab.Screen
                name="Profile"
                component={Profile}
                options={{
                    tabBarLabel: 'Profile',
                    tabBarColor: colors.tab,
                    tabBarIcon: ({ color }) => (
                        <Ionicons name="ios-person" color={color} size={26} />
                    ),
                }}
            />
        </Tab.Navigator>
    )
}

这是我的堆栈。我在网站上找到了一行代码，其中显示了将道具传递给屏幕选项的信息，例如options={{ headerTitle: props => <LogoTitle {...props} /> }}。我尝试了类似的操作-将LogoTitle替换为Tabs-我收到一个错误消息，说Error: Another navigator is already registered for this container.

function AppTabs() {
    const { colors } = useTheme();
    const theme = useTheme();
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: colors.tab,
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                }
            }}
        >
            <Stack.Screen
                name="Tabs"
                component={Tabs}
                options={({ navigation, route }) => ({
                    headerLeft: () => (
                        <Icon.Button
                            name="ios-menu"
                            size={25}
                            backgroundColor={colors.tab}
                            onPress={() => navigation.openDrawer()}
                        >

                        </Icon.Button>
                    ),
                    // Pass tab name when tab is pressed, here!

                })}
            />
            <Stack.Screen
                name="Contacts"
                component={Phone}
            />
            <Stack.Screen
                name="ContactProfile"
                component={ContactProfile}
            />
        </Stack.Navigator>

    )
}

export default AppTabs;

Answer 1

您可以为此使用.myButton:active::before { transform: translate(0, 0); }函数

getFocusedRouteNameFromRoute

您可以在文档中进一步了解它：https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state

如何将名称道具从BottomTabs传递到Stack.Screen headerTitle？

1 个答案: