Как добавить настраиваемую навигацию по ящику в React Native

В какой-то момент вам нужно будет использовать навигацию в вашем родном приложении для реагирования, и подход к этой задаче зависит от того, что вы хотите, но большинство приложений имеют навигацию по стеку, навигацию с вкладками и навигацию по ящику, и хотя это прямо вперед, чтобы настроить навигацию с вкладками, то же самое нельзя сказать о навигации в ящиках.

В этой статье мы узнаем, как сделать пользовательскую навигацию по ящику в React Native.

после того, как вы установите собственное приложение для реагирования, вам нужно установить ящик @react-navigation/drawer, следуйте документации, чтобы установить его.

вы можете использовать навигацию по ящику следующим образом:

import React, { useContext, useState, useEffect } from 'react';
import { View, Button, ActivityIndicator, Text } from 'react-native';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';

import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
// Before rendering any navigation stack
import { enableScreens } from 'react-native-screens';


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { Feather, FontAwesome, Ionicons } from '@expo/vector-icons';

import SideBar from '../components/SideBar';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function NavDrawer() {
  enableScreens();
  const navigation = useNavigation();
  // const [settings, setSettings] = useState([]);
  // const [initialScreen, setInitialScreen] = useState('Welcome');


  return (
    <Drawer.Navigator
      drawerContent={(props) => <SideBar {...props} />}
      initialRouteName="InitialSettings"
      screenOptions={{ headerShown: false, headerBackTitleVisible: false }}
    >
      <Drawer.Screen
        name="InitialSettings"
        component={OnboardingScreen}
        options={{
          title: 'Initial Setting',
        }}
      />

      <Drawer.Screen
        name="home"
        component={NavStack}
        options={{
          title: 'home',
        }}
      />

      <Drawer.Screen
        name="Customers"
        component={CustomerListScreen}
        options={{
          headerShown: true,
        }}
      />

      <Drawer.Screen
        name="Suppliers"
        component={SupplierListScreen}
        options={{
          headerShown: true,
        }}
      />
      <Drawer.Screen
        name="Insights"
        component={SummaryReportScreen}
        options={{
          headerShown: true,
        }}
      />
    </Drawer.Navigator>
  );
}
function NavTab() {
  enableScreens();
  const navigation = useNavigation();

  return (
    <Tab.Navigator initialRouteName="HomeScreen">
      <Tab.Screen
        name="HomeScreen"
        component={WelcomeScreen}
        options={{
          tabBarLabel: '',
          tabBarActiveTintColor: 'green',
          tabBarIcon: ({ color, size }) => <Ionicons name="md-home" size={size} color={color} />,
        }}
      />

      <Tab.Screen
        name="Items List"
        component={ItemListScreen}
        options={{
          title: 'Stock Items',
          tabBarLabel: '',
          tabBarActiveTintColor: 'green',
          tabBarIcon: ({ color, size }) => (
            <FontAwesome name="list-alt" size={size} color={color} />
          ),
        }}
      />

      <Tab.Screen
        name="Orders"
        component={OrderScreen}
        options={{
          title: 'Orders',
          tabBarLabel: '',
          tabBarActiveTintColor: 'green',
          tabBarIcon: ({ color, size }) => (
            <Ionicons
              name="md-add-circle"
              size={36}
              color={color}
              onPress={() =>
                navigation.navigate('Orders', {
                  order_type: 'sale',
                })
              }
            />
          ),
        }}
      />

      {/* <Tab.Screen name="Order Details" component={OrderDetailsSCreen} />  */}

      <Tab.Screen
        name="Clients"
        component={CustomerListScreen}
        options={{
          title: 'Customers',
          tabBarLabel: '',
          tabBarActiveTintColor: 'green',
          tabBarIcon: ({ color, size }) => <Ionicons name="person" size={24} color={color} />,
        }}
      />

      <Tab.Screen
        name="General Settings"
        component={SettingGeneralScreen}
        options={{
          title: 'General Settings',
          tabBarLabel: '',
          tabBarActiveTintColor: 'green',
          tabBarIcon: ({ color, size }) => <Feather name="settings" size={size} color={color} />,
        }}
      />
    </Tab.Navigator>
  );
}

export function NavStack() {
  enableScreens();
  const navigation = useNavigation();

  return (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen name="InitialSettings" component={OnboardingScreen} />
      <Stack.Screen name="Welcome" component={NavTab} options={{ headerShown: false }} />
      {/** Orders*/}
    </Stack.Navigator>
  );
}

/**
 * App Root Navigation
 */
export default function RootNavigation() {

  return (
    <>
      {user ? (
        <>
          <NavigationContainer>
            <NavDrawer />
          </NavigationContainer>
        </>
      ) : (
        <NavigationContainer>
          <AuthStackNavigator />
        </NavigationContainer>
      )}
    </>
  );
}

сосредоточьтесь на компоненте навигатора ящиков, где я указал это:

      drawerContent={(props) => <SideBar {...props} />}

этот параметр не позволит нам передать реквизиты из другого компонента, который мы собираемся создать, вызовите SideBar.

import { AntDesign, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
import { FlatList } from "react-native-gesture-handler";




export default function SideBar() {
    useEffect(() => {
        retrieveSetting();
    })
    const SupplierIcon = (<MaterialCommunityIcons name="truck-delivery-outline" size={24} color="#10b981" />)
    const ReportInsightsIcon = (<MaterialIcons name="insights" size={24} color="#10b981" />);
    const PurchasesIcon = (<AntDesign name="shoppingcart" size={24} color="#10b981" />);
    const ReceiptsIcon = (<FontAwesome5 name="receipt" size={24} color="#10b981" />);
    const ShareIcon = (<AntDesign name="sharealt" size={24} color="#10b981" />);
    const FeedBackIcon = (<MaterialIcons name="feedback" size={24} color="#10b981" />);

    const [selectedId, setSelectedId] = useState(null);
    const [businessName, setBusinessName] = useState(null);
    const [currency, setCurrency] = useState(null);

    const listArrayItem = [
        { icon: SupplierIcon, title: 'Suppliers' },
        { icon: ReportInsightsIcon, title: 'Report Insights' },
        { icon: PurchasesIcon, title: 'Purchases' },
        { icon: ReceiptsIcon, title: 'Receipts' }
    ]

    const bottomListItems = [
        { icon: ShareIcon, title: 'Tell a Friend' },
        { icon: FeedBackIcon, title: 'Help and FeedBack' },
    ]
    const Item = ({ title, icon, handlePress, backgroundColor, color }) => (
        <TouchableOpacity onPress={handlePress} style={[styles.item, { backgroundColor: backgroundColor }]}>
            <View>
                <Text>{icon}</Text>
            </View>
            <Text style={[styles.title, { color: color }]}>{title}</Text>
        </TouchableOpacity>
    );
    const renderItem = ({ item }) => {
        const backgroundColor = item.title === selectedId ? "#6e3b6e" : "white";
        const color = item.title === selectedId ? 'white' : 'black';
        return (
            <Item
                onPress={() => setSelectedId(item.title)}
                title={item.title}
                backgroundColor={backgroundColor}
                textColor={color}
                icon={item.icon} />
        );
    }

    return (

        <View style={{ flex: 1 }}>
            <View style={{ justifyContent: "center", flex: 0.3, paddingHorizontal: 20 }}>
                <Image source={require('./../../assets/snack-icon.png')} style={{ marginLeft: 50, width: 120, height: 70 }} />
                <Text style={{ fontWeight: "bold", fontSize: 20, color: "#47a67f" }}>{businessName}</Text>
                <Text style={{ fontSize: 12, marginTop: 5, color: "green", flexDirection: "row", justifyContent: "space-between" }}><Ionicons name="md-cash-outline" size={24} color="green" /> {currency}</Text>
                <Text style={{ fontSize: 12, marginTop: 5, color: "green" }}>{`6000 Products`}</Text>
            </View>
            <View style={{ flex: 0.55 }}>
                <FlatList
                    data={listArrayItem}
                    renderItem={renderItem}
                />
            </View>
            <View style={{ flex: 0.35 }}>
                <FlatList
                    data={bottomListItems}
                    renderItem={renderItem}
                />
            </View>
        </View >

    )

}
const styles = StyleSheet.create({
    item: {
        // padding: 20,
        backgroundColor: "",
        paddingVertical: 10,
        marginVertical: 8,
        marginHorizontal: 16,
        flexDirection: "row",
        justifyContent: "flex-start"
    },
    title: {
        fontSize: 18,
        marginLeft: 20,
        paddingLeft: 20
    },
});

Теперь, если вы перезагрузите свое приложение, это должно дать вам пользовательскую боковую панель, которая выглядит примерно так:

Я надеюсь, что это поможет вам в создании пользовательской боковой панели в вашем проекте.

вы можете добавить навигацию для перехода к другим страницам стека, если хотите. однако я не буду освещать это в этом уроке.

Спасибо за ваше время