在React Native上将Stack Navigator和Bottom Tab Navigator结合使用 [英] Combine Stack Navigator with Bottom Tab Navigator on React Native

问题描述

我想知道如何在app.js的Home Navigator中将底部选项卡导航器与Stack Navigator结合使用 这是我的代码

I want to know how to combine bottom tab navigator with Stack Navigator on Home Navigator in app.js Here is my code

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Signup from './screens/signup';
import Login from './screens/login';
import Home from './screens/Home';
import Loading from './screens/Loading';
import Welcome from './screens/Welcome';
import ForgotPassword from './screens/ForgotPassword';

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const navigator = createStackNavigator({
  loading: {
    screen: Loading,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Welcome: {
    screen: Welcome,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  signup: {
    screen: Signup,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  login: {
    screen: Login,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  Home: {
    screen: Home,
    navigationOptions: {
      headerShown: false,
      headerTransparent: true,
    },
  },
  InitialRouteName: Loading,
});

const AppContainer = createAppContainer(navigator);

有人建议在此代码中添加底部标签导航器吗?我想知道如何在app.js中将Tab底部导航器与堆栈导航器结合使用(使用底部标签导航器进行调用) 谢谢

Any suggest to add bottom tab navigator in this code? I want to know how to combine Tab bottom navigator with stack navigator in app.js (calling home with bottom tab navigator) thanks

推荐答案

您可以创建tabNavigator并将其设置为其他路线.

You can create a tabNavigator and set it like any other route.

Obs:也适用于抽屉导航器.

Obs: Also work for drawerNavigator.

示例:

const MainTab = TabNavigator(tabs, {
  initialRouteName: initialRouteName,
  tabBarPosition: "bottom",
});


const RootNavigator = StackNavigator(
  {
    Root: {
      screen: MainTab,
      navigationOptions: {
        headerMode: "none"
      }
    },
    /* Other Screens */
    Login: { screen: LoginScreen },
  }
)

const AppContainer = createAppContainer(RootNavigator);

糟糕:这也适用于抽屉导航器.

Obs: this also work for drawerNavigator.

这篇关于在React Native上将Stack Navigator和Bottom Tab Navigator结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！