Question

我正在使用带有React Navigation 5的Drawer，Stack和Tab导航器，我已经遵循了文档，但是没有显示Tab Navigator。这是我的代码：在我的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屏幕上可见，但不起作用

Answer 1

我不确定您的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>
  );
};

这样，您可以同时显示标签和抽屉。

BottomTabNavigator在React Native中不起作用

1 个答案: