当我将其添加到React native的“抽屉导航”中时,标签栏消失了

时间:2020-06-03 10:21:50

标签: react-native react-navigation react-native-navigation

<Drawer.Screen name="Anasayfa" component={TabsScreen} />在抽屉导航的内部,当我单击Anasayfa时,选项卡出现并正常工作。但是当我喜欢别人时,它就会消失。我想同时显示标签栏和导航抽屉内的屏幕。我需要这样做才能拥有良好的应用程序基础结构。因为我将逐步扩展应用程序。


import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';

import MyTabBar from '../src/components/tabBar/tabbar';
import MainPage from './views/MainPage';
import Profile from './views/Profile';
import Notification from './views/Notification';
import MainDetail from './views/MainDetail';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Anasayfa" component={MainPageStack} />
    <Drawer.Screen name="Notification" component={NotificationStack} />
    <Drawer.Screen name="Profil" component={TabsScreen} />
  </Drawer.Navigator>
);

//anasayfada ki link stack leri
function MainPageStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Anasayfa"
        // headerMode="none"
        // options={() => {
        //   return {
        //     headerShown: false,
        //   };
        // }}
        component={MainPage}
      />
      <Stack.Screen name="AnasayfaDetaylari" component={MainDetail} />
    </Stack.Navigator>
  );
}

function NotificationStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Bildirimler"
        headerMode="none"
        options={() => {
          return {
            headerShown: false,
          };
        }}
        component={Notification}
      />
    </Stack.Navigator>
  );
}

const TabsScreen = () => (
  <Tab.Navigator
    initialRouteName="Anasayfa"
    tabBar={(props) => <MyTabBar {...props} />}>
    <Tab.Screen name="Bildirimler" component={NotificationStack} />
    <Tab.Screen name="Anasayfa" component={MainPageStack} />
    <Tab.Screen name="Profil" component={Profile} />
  </Tab.Navigator>
);

export default DrawerScreen;

0 个答案:

没有答案