0

我想要实现的是我的应用中有 2 个标签

1) Home => 按下它会显示一个简单的屏幕

2）菜单=>按下它会根据抽屉是否打开来打开和关闭抽屉。

抽屉有自定义内容。它有 4 个按钮 1) 帐户 2) 报告 3) 图表 4) 列表

在任何抽屉项目上选择它应该在“菜单”选项卡导航器空间中打开相应的页面。

那么如何管理这种导航呢？

import React from 'react';
import { View, Text } from 'react-native'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import ShipmentScreen from '../containers/Shipment/ShipmentScreen';
import LoginScreen from '../containers/Login/LoginScreen';
import ShipmentDetailScreen from '../containers/Shipment/ShipmentDetailScreen';
import AuthLoadingScreen from '../containers/AuthLoadingScreen';
import BarcodeScreen from '../containers/Barcode/BarcodeScreen';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Colors from "../utils/Colors";
import Sidebar from '../components/Sidebar';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}
class Data extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Menu Screen</Text>
            </View>
        );
    }
}

const defaultStackNavOptions = {
    headerStyle: {
        backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
    },
    headerTitleStyle: {
        fontWeight: 'bold',
    },
    headerBackTitleStyle: {
        fontWeight: 'bold',
    },
    headerTintColor: Platform.OS === 'android' ? Colors.lightColor : Colors.primaryColor,
    headerTitle: 'SFL'
};

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <MaterialCommunityIcons style={{ color: tintColor }} size={25} name={'home'} />
                </View>),
        },
    },
    Menu: {
        screen: sideDrawer,
        navigationOptions: {
            tabBarLabel: 'Menu',
            tabBarIcon: ({ tintColor }) => (
                <View>
                    <MaterialCommunityIcons style={{ color: tintColor, }} size={25} name={'menu'} />
                </View>),

        },
    },
},
    {
        initialRouteName: "Home",
        activeColor: Colors.activeTabColor,
        inactiveColor: Colors.inactiveTabColor,
        barStyle: {
            backgroundColor: Colors.grayColor
        },
        tabBarOptions: {
            style: {
                borderTopColor: 'transparent',
                shadowColor: Colors.darkColor,
                shadowOpacity: 1,
                shadowRadius: 30,
                shadowOffset: {
                    height: 10,
                    width: 10
                },
                elevation: 5
            },
            labelStyle: {
                fontSize: 12,
                fontWeight: 'bold'
            },
            tabStyle: {
                paddingVertical: 5
            }
        }
    },
);

const sideDrawer = createDrawerNavigator(
    {
        ScreenA: { screen: Data },
        ScreenB: { screen: Data },
        ScreenC: { screen: Data }
    },
    {
        drawerPosition: 'right',
        contentComponent: Sidebar,
    }
)

export default AppContainer = createAppContainer(TabNavigator)

我怎样才能做到这一点？

任何人都可以提出解决方案吗？

谢谢。

4

0 回答 0