React Native - Как настроить навигацию по выдвижным ящикам на конкретной вкладке на основе выбора элементов выдвижного ящика? - PullRequest
Новая
       76

React Native - Как настроить навигацию по выдвижным ящикам на конкретной вкладке на основе выбора элементов выдвижного ящика?

0 голосов
/ 27 марта 2020

Чего я хочу добиться, так это того, что в моем приложении есть 2 вкладки

1) Домой => При нажатии отображается простой экран

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)

Как я смогу этого добиться?

Кто-нибудь может предложить обходное решение?

Спасибо.

...