BottomTabNavigator не работает в React Native

Я использую навигатор Drawer, Stack и Tab с помощью React Navigation 5, я следил за документацией, но навигатор вкладок не отображается. Вот мой код: В моем app.js я назвал свой основной StackNavigator:

const Stack = createStackNavigator();

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator headerMode="none" initialRouteName="HomePage">
          <Stack.Screen name="Home" component={HomePage} />
          <Stack.Screen name="Login" component={LoginSignUp} />
          <Stack.Screen name="DrawerScreenss" component={DrawerScreens} />
          <Stack.Screen name="Tab" component={TabComp} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

Это мой код навигации по ящику:

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DrawerContent from './DrawerComponents/DrawerContent';
import DrawerHome from './DrawerComponents/DrawerHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
  render() {
    return (
      <Drawer.Navigator
        drawerContent={() => (
          <DrawerContent navigation={this.props.navigation} />
        )}>
        <Drawer.Screen name="DrawHome" component={DrawerHome} />
      </Drawer.Navigator>
    );
  }
}

Вот мой TabNavigator, который не работает:

import React, { Component } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import DrawerHome from "./DrawerHome";
import Bookmarks from "./Bookmarks";

export default class TabComp extends Component {
  render() {
    const Tab = createBottomTabNavigator();
    return (
      <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          activeTintColor: "#e91e63",
          activeTintColor: "red",
          inactiveTintColor: "grey",
          style: {
            backgroundColor: "white",
            borderTopColor: "red"
          },
          labelStyle: {
            fontSize: 12,
            fontWeight: "normal"
          },
          indicatorStyle: {
            borderBottomColor: "red",
            borderBottomWidth: 4
          }
        }}
      >
        <Tab.Screen name="Home" component={DrawerHome} />
        <Tab.Screen name="Bookmarks" component={Bookmarks} />
      </Tab.Navigator>
    );
  }
}

Он должен быть виден на моих экранах DrawerHome, но не работать.


react-native react-navigation react-navigation-v5
person Talha Nadeem    schedule 19.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я точно не знаю, как выглядит ваш компонент HomePage, но он мог бы выглядеть примерно так с кнопкой, которая переходит на ваш экран DrawerScreens:

const HomePage = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed Screen</Text>
      <Button
        title="Go to DrawerScreens"
        onPress={() => navigation.navigate('DrawerScreens')}
      />
    </View>
  );
};

Важная вещь, которую я изменил в вашем компоненте DrawerScreens, заключается в том, что его экран является вашим компонентом TabComp:

class DrawerScreens extends React.Component {
  render() {
    return (
      <Drawer.Navigator
        drawerContent={() => (
          <DrawerContent navigation={this.props.navigation} />
        )}>
        <Drawer.Screen name="Tab" component={TabComp} />
      </Drawer.Navigator>
    );
  }
}

Сам компонент TabComp может остаться прежним.

Затем внутри вашего компонента DrawerHome вы можете активировать свой ящик, используя navigation.openDrawer().

const DrawerHome = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed Screen</Text>
      <Button title="Open Drawer" onPress={() => navigation.openDrawer()} />
    </View>
  );
};

Таким образом, вы можете одновременно отображать вкладки и ящик.

person Bas van der Linden    schedule 19.07.2020