Question

我是反应导航的新手，我试图包括页脚标签导航和抽屉。该应用成功加载了＃34; Landing＆＃34;页面，这是抽屉导航器的默认屏幕。但是，当我在交易，收藏夹和仪表板页面上时，页脚导航器不会出现。我将不胜感激任何反馈。谢谢。

    const Tabs = TabNavigator({
      Deals: {screen: DealsPage},
      Favorites: {screen: FavoritesPage},
      Dashboard: {screen: Dashboard},
    }, {
      order:['Deals','Favorites','Dashboard'],
      animationEnabled: true
    })

    const Drawer = DrawerNavigator(
      {
        Landing: { screen: Landing },
        Deals: {screen: DealsPage},
        Favorites: {screen: FavoritesPage},
        Dashboard: {screen: Dashboard},
        Tabs: {screen: Tabs}
      },
      {
        initialRouteName: "Landing",
        contentOptions: {
          activeTintColor: "#e91e63"
        },
        contentComponent: props => <SideBar {...props} />
      }
    );

    const AppNavigator = StackNavigator(
      {
        Drawer: { screen: Drawer },

        Tabs: { screen: Tabs},

        Landing: { screen: Landing },

        SignUp: {screen: SignUpPage},
        SignIn: {screen: SignInPage},

        Deals: {screen: DealsPage},

        Favorites: {screen: FavoritesPage},

        Dashboard: {screen: Dashboard},
      },
      {
        initialRouteName: "Drawer",
        headerMode: "none"
      }
    );

class RouterApp extends Component {
  componentDidMount() {
        console.log("routerapp mounting")
        this.props.fetchUser();
        this.props.getLocation();
  }

  render() {
    return (
      <Root>
        <AppNavigator />
      </Root>
    );
  }
}

export default connect(null, actions)(RouterApp);

Answer 1

这里有一个完整的示例，说明如何使用react-navigation v3组合使用Drawer和Tab导航

请查看Video教程，以详细了解其构建方式。

Github Repo is here too

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import Icon from '@expo/vector-icons/Ionicons';
/**
 * - AppSwitchNavigator
 *    - WelcomeScreen
 *      - Login Button
 *      - Sign Up Button
 *    - AppDrawerNavigator
 *          - Dashboard - DashboardStackNavigator(needed for header and to change the header based on the                     tab)
 *            - DashboardTabNavigator
 *              - Tab 1 - FeedStack
 *              - Tab 2 - ProfileStack
 *              - Tab 3 - SettingsStack
 *            - Any files you don't want to be a part of the Tab Navigator can go here.
 */

import {
  createSwitchNavigator,
  createAppContainer,
  createDrawerNavigator,
  createBottomTabNavigator,
  createStackNavigator
} from 'react-navigation';
class App extends Component {
  render() {
    return <AppContainer />;
  }
}
export default App;

class WelcomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button title="Login" onPress={() => this.props.navigation.navigate('Dashboard')} />
        <Button title="Sign Up" onPress={() => alert('button pressed')} />
      </View>
    );
  }
}

class DashboardScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>DashboardScreen</Text>
      </View>
    );
  }
}

class Feed extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button title="Go To Detail Screen" onPress={() => this.props.navigation.navigate('Detail')} />
      </View>
    );
  }
}

class Settings extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Settings</Text>
      </View>
    );
  }
}

class Profile extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile</Text>
      </View>
    );
  }
}

const Detail = props => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Detail</Text>
  </View>
);

const FeedStack = createStackNavigator(
  {
    Feed: {
      screen: Feed,
      navigationOptions: ({ navigation }) => {
        return {
          headerTitle: 'Feed',
          headerLeft: (
            <Icon style={{ paddingLeft: 10 }} onPress={() => navigation.openDrawer()} name="md-menu" size={30} />
          )
        };
      }
    },
    Detail: {
      screen: Detail
    }
  },
  {
    defaultNavigationOptions: {
      gesturesEnabled: false
    }
  }
);

const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: 'Profile',
        headerLeft: (
          <Icon style={{ paddingLeft: 10 }} onPress={() => navigation.openDrawer()} name="md-menu" size={30} />
        )
      };
    }
  }
});
const SettingsStack = createStackNavigator({
  Settings: {
    screen: Settings,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: 'Settings',
        headerLeft: (
          <Icon style={{ paddingLeft: 10 }} onPress={() => navigation.openDrawer()} name="md-menu" size={30} />
        )
      };
    }
  }
});

const DashboardTabNavigator = createBottomTabNavigator(
  {
    FeedStack,
    ProfileStack,
    SettingsStack
  },
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        header: null,
        headerTitle: routeName
      };
    }
  }
);
const DashboardStackNavigator = createStackNavigator(
  {
    DashboardTabNavigator: DashboardTabNavigator
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon style={{ paddingLeft: 10 }} onPress={() => navigation.openDrawer()} name="md-menu" size={30} />
        )
      };
    }
  }
);

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStackNavigator
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Welcome: { screen: WelcomeScreen },
  Dashboard: { screen: AppDrawerNavigator }
});

const AppContainer = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

如何在react-navigation中同时使用抽屉和制表符导航器

1 个答案: