React Native - 单击抽屉组件底部导航时不显示

Question

我是 React Native 新手，正在构建一个带有登录、注册、主页和设置屏幕的简单应用程序。

我已经安装了 Stack Navigator、Drawer Navigator 和 Bottom Tabs Navigator，我面临的问题是，当我使用用户凭据登录时，我会被重定向到主屏幕，在其中我可以看到底部标签和抽屉。

现在，当从抽屉单击“设置”时，底部选项卡不显示。

抽屉

此处底部导航未显示

这是代码：

App.js

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import AuthContext from './src/contexts/AuthContext';
import AuthNavigator from "./src/navigation/AuthNavigator";
import MainNavigator from "./src/navigation/MainNavigator";

export default function App({ navigation }) {
    const Stack = createStackNavigator();

    const [state, dispatch] = React.useReducer(
        (prevState, action) => {
            switch (action.type) {
                case 'SIGN_IN':
                    return {
                        ...prevState,
                        isSignout: false,
                        userToken: action.token,
                    };
                case 'SIGN_OUT':
                    return {
                        ...prevState,
                        isSignout: true,
                        userToken: null,
                    };
            }
        },
        {
            isLoading: true,
            isSignout: false,
            userToken: null,
        }
    );

    const authContext = React.useMemo(
        () => ({
            signIn: async (data) => {
                dispatch({ type: 'SIGN_IN', token: data });
            },
            signOut: () => dispatch({ type: 'SIGN_OUT' })
        }),
        []
    );

    return (
        <AuthContext.Provider value={authContext}>
            <NavigationContainer>
                {state.userToken == null ? (
                    <AuthNavigator />
                ) : (
                    <MainNavigator />
                )}
            </NavigationContainer>
        </AuthContext.Provider>
    );
}

AuthNavigator

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

import {
    Login,
    Registration,
} from '../screens';

const Stack = createStackNavigator();

function AuthNavigator() {
    return (
        <Stack.Navigator initialRouteName="Login" screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Register" component={Registration} />
        </Stack.Navigator>
    );
}

export default AuthNavigator;

主导航器

import { createDrawerNavigator } from '@react-navigation/drawer';
import React from 'react';

import {
    Settings,
} from '../screens';
import TabNavigator from './TabNavigator';
import { createStackNavigator } from '@react-navigation/stack';

const Drawer = createDrawerNavigator();

function MainNavigator() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Home" component={TabNavigator} />
            <Drawer.Screen name="Settings" component={Settings} />
        </Drawer.Navigator>
    );
}

export default MainNavigator;

选项卡导航器

import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';
import { Icon } from '@rneui/themed';

import {
    Chat,
    Documents,
    Login,
    Properties,
    RecentActivity,
} from '../screens';

const TabNavigator = () => {
    const navigation = useNavigation();
    const Tab = createBottomTabNavigator();

    return (
        <Tab.Navigator initialRouteName="Properties" screenOptions={{ headerShown: false }}>
            <Tab.Screen name="Properties" component={Properties}
                options={{
                    tabBarIcon: ({ focused, title }) => {
                        const color = focused ? '#84b545' : '#a1a5b8';

                        return (
                            <>
                                <Ionicons
                                    name='home'
                                    type='ionicon'
                                    size={28}
                                    color={color}
                                />
                            </>
                        );
                    }
                }} />
            <Tab.Screen name="Documents" component={Documents} options={{
                tabBarIcon: ({ focused, title }) => {
                    const color = focused ? '#84b545' : '#a1a5b8';

                    return (
                        <>
                            <Ionicons
                                name='documents'
                                type='ionicon'
                                size={28}
                                color={color}
                            />
                        </>
                    );
                }
            }} />
            <Tab.Screen name="RecentActivity" component={RecentActivity}
                options={{
                    tabBarIcon: ({ focused, title }) => {
                        const color = focused ? '#84b545' : '#a1a5b8';

                        return (
                            <>
                                <Ionicons
                                    name='timer'
                                    type='ionicon'
                                    size={28}
                                    color={color}
                                />
                            </>
                        );
                    }
                }} />
            <Tab.Screen name="Chat" component={Chat} options={{
                tabBarIcon: ({ focused, title }) => {
                    const color = focused ? '#84b545' : '#a1a5b8';

                    return (
                        <>
                            <Ionicons
                                name='chatbox-ellipses'
                                type='ionicon'
                                size={28}
                                color={color}
                            />
                        </>
                    );
                }
            }} />
            <Tab.Screen name="Menu" component={Chat}
                options={{
                    tabBarIcon: ({ focused, title }) => {
                        const color = focused ? '#84b545' : '#a1a5b8';

                        return (
                            <>
                                <Ionicons
                                    name='menu'
                                    type='ionicon'
                                    size={28}
                                    color={color}
                                />
                            </>
                        );
                    }
                }} />
        </Tab.Navigator>
    );
};

export default TabNavigator;

我已经阅读了该文档，但我是 React Native 的新手，所以我不明白，这就是我来这里寻求更多指导的原因。

Answer 1

问题

选项卡未显示在设置屏幕中的原因是设置抽屉未指向选项卡导航器。所以它只会按照指示显示设置屏幕。

建议

相反，如果您希望设置屏幕也具有选项卡导航，则需要将设置屏幕放在选项卡导航器下方。可以是它自己的选项卡，也可以是位于其中一个选项卡下的堆栈。

解决方案

使用相同的选项卡导航器让设置抽屉导航到设置选项卡；修改选项卡导航器，如下所示：

const TabNavigator = ({route}) => {
  const {initialRouteName} = route.params; // Passed down a variable from the drawers to decide what screen to render first
  const navigation = useNavigation();
  const Tab = createBottomTabNavigator();

  return (
    <Tab.Navigator
      initialRouteName={initialRouteName} // Dynamically selects initial route based on drawer selected
      screenOptions={{headerShown: false}}>
      <Tab.Screen name="Settings" component={Settings} /> {/*Added Settings Tab*/}
      <Tab.Screen
        name="Properties"
        component={Properties}
        .
        .
        .
    </Tab.Navigator>
  );
};

export default TabNavigator;

之后，在抽屉导航器中声明抽屉时，我们需要将initialRouteName作为initialParams传递。

function MainNavigator() {
  return (
      <Drawer.Navigator>
          <Drawer.Screen name="Home" component={TabNavigator}
            initialParams={{initialRouteName: 'Properties'}} />
          <Drawer.Screen name="Settings" component={Settings}
            initialParams={{initialRouteName: 'Settings'}} />
      </Drawer.Navigator>
  );
}

注意：在上面的解决方案中，我传递了 variable 'initialRouteName'。你可以将其命名为你喜欢的任何名称，我选择这个名称是因为它很容易与导航器相关prop'initialRouteName'