Drawer не работает

Question

Нужна ваша помощь. Пробую сделать drawer. По домашней страницей в drawer у меня Home, но почему-то не работает ни в браузерной версии ни в expo go. В чем моя ошибка ??

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Home from "./Components/Home";
import Basket from "./Components/Basket";
import Shops from "./Components/Shops";
import Products from "./Components/Products";
import WishList from "./Components/WishList";

let BottomNavigator = createBottomTabNavigator();

export default function App() {
  return (<NavigationContainer>
<BottomNavigator.Navigator tabBarOptions={{tabStyle: {justifyContent: 'center', alignItems: 'center'}}}>
<BottomNavigator.Screen name={'Домашня'} component={Home}/>
<BottomNavigator.Screen name={'Продукти'} component={Products}/>
<BottomNavigator.Screen name={'Магазини'} component={Shops}/>
<BottomNavigator.Screen name={'Список бажань'} component={WishList}/>
<BottomNavigator.Screen name={'Корзина'} component={Basket}/>
</BottomNavigator.Navigator>
</NavigationContainer>);

Home.js

import React from "react";
import {View, Text} from "react-native";

let Home = () => {
return(<View>
<Text>Home Page </Text>
</View>) }

export default Home;

Drawer.js

import React from "react";
import {createDrawerNavigator} from "@react-navigation/drawer";
import Home from "../Components/Home";

let Drawer = createDrawerNavigator();

let HomeDrawer = () => {
return (<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>)
}

export default HomeDrawer;

Answer 1

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Home from "./Components/Home";
import Basket from "./Components/Basket";
import Shops from "./Components/Shops";
import Products from "./Components/Products";
import WishList from "./Components/WishList";

# импорутируем наш drawer
import HomeDrawer from '...';

let BottomNavigator = createBottomTabNavigator();

export default function App() {
  return (<NavigationContainer>
<BottomNavigator.Navigator tabBarOptions={{tabStyle: {justifyContent: 'center', alignItems: 'center'}}}>

# заменяем обычный home на drawer
<BottomNavigator.Screen name={'Домашня'} component={HomeDrawer}/>

<BottomNavigator.Screen name={'Продукти'} component={Products}/>
<BottomNavigator.Screen name={'Магазини'} component={Shops}/>
<BottomNavigator.Screen name={'Список бажань'} component={WishList}/>
<BottomNavigator.Screen name={'Корзина'} component={Basket}/>
</BottomNavigator.Navigator>
</NavigationContainer>);

Мне кажется что ваша структура изначально не правильная, точнее я такую не встречал. Вот как должно быть (ИМХО)

Drawer.js

import React from "react";
import {createDrawerNavigator} from "@react-navigation/drawer";

# ---------------------
import SomeTabs from '....';

let Drawer = createDrawerNavigator();

export default function App() {
   return (
      <NavigationContainer>      
           <Drawer.Navigator>
                <Drawer.Screen name="Some" component={Some} />
           </Drawer.Navigator> 
      </NavigationContainer>  
   )
}

export default SomeDrawer;

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import Home from "./Components/Home";
import Basket from "./Components/Basket";
import Shops from "./Components/Shops";
import Products from "./Components/Products";
import WishList from "./Components/WishList";

let BottomNavigator = createBottomTabNavigator();

# --------SomeTabs
export default function SomeTabs() {
  return (<NavigationContainer>
<BottomNavigator.Navigator tabBarOptions={{tabStyle: {justifyContent: 'center', alignItems: 'center'}}}>
<BottomNavigator.Screen name={'Домашня'} component={Home}/>
<BottomNavigator.Screen name={'Продукти'} component={Products}/>
<BottomNavigator.Screen name={'Магазини'} component={Shops}/>
<BottomNavigator.Screen name={'Список бажань'} component={WishList}/>
<BottomNavigator.Screen name={'Корзина'} component={Basket}/>
</BottomNavigator.Navigator>
</NavigationContainer>);

БЛОГ НА HUSL

Drawer не работает

Ответы (1 шт):