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

我是React Native的新手，构建了一个简单的应用程序，包括登录，注册，主页和设置屏幕。
我已经安装了Stack Navigator、Drawer Navigator和Bottom Tabs Navigator，我面临的问题是，当我使用用户凭据登录时，我被重定向到主屏幕，在那里我可以看到Bottom Tab和Drawer。
现在，当点击设置从抽屉，底部标签不显示。
抽屉

此处底部导航不显示

代码如下：

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;

MainNavigator

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的新手，所以我不明白为什么我来这里获得更多的指导。

问题

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

建议

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

解决方案

使用相同的选项卡导航器将设置抽屉导航到设置选项卡;修改选项卡导航器，使其看起来像这样：

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>
  );
}

注意：在上面的解决方案中，我传递了变量'initialRouteName'。你可以给它起任何你喜欢的名字，我选择这个名字是因为它很容易与Navigatorprop'initialRouteName'相关。

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

1条答案

相关问题

热门标签

最新问答