javascript - createbottomtabnavigator 在所有屏幕上都不可见

Question

大家好，我在 React Native 中使用 createbottomtabnavigator，但是，底部选项卡在所有屏幕上都不可见，我在互联网上进行了搜索，但似乎找不到任何解决方案。我希望能够在除登录、注册、欢迎、忘记屏幕之外的所有屏幕上显示底部选项卡。而且，从一个屏幕到另一个屏幕的转换是滞后的。任何建议将不胜感激。代码如下所示

      import React from 'react';
      import { Image } from 'react-native';
      import { createAppContainer, createStackNavigator,
        createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
      import Payment from '../screens/containers/Payment';
      import Notification from './screens/containers/Notification';
      import Predictions from './screens/containers/Predictions';
      import Orion from './screens/containers/Orion';
      import Results from './screens/containers/Results';
      import Welcome from '../screens/Welcome';
      import Login from '../screens/Login';
      import SignUp from '../screens/SignUp';
      import Forgot from '../screens/Forgot';
      import Explore from '../screens/Explore';
      import Browse from '../screens/Browse';
      import Product from '../screens/Product';
      import Settings from '../screens/Settings';
      import Map from '../screens/Map';
      import { Account, Edits, Imports, Exports,
        International, Local, Ozone, } from '../screens/containers/Profile/Screens/Account';



      const LoggedInNavigator = createBottomTabNavigator({
        Orion,
        Payment,
        Results,
        Notification,
        Predictions,
      }, {
        initialRouteName: 'Results',
        tabBarOptions: {
          tabBarVisible: true,
          animationEnabled: true,
          showLabel: false,
          marginBottom: 5,
          activeTintColor: 'red',
          inactiveTintColor: '#grey',
          style: {
            backgroundColor: '#FAFAFA',
          }
        },
      }
      );


      const screens = createStackNavigator({
        Import,
        Export,
        Ozone,
        Local,
        International,
        Edit,
        Forgot,
        Account,
        Welcome,
        Login,
        SignUp,
        Explore,
        Browse,
        Product,
        Settings,
      }, {
        navigationOptions: {
          tabBarVisible: true,
          animationEnabled: true,
        },
      });

      const switcher = createSwitchNavigator(
        {
          Tab: LoggedInNavigator,
          Login: screens,
        },
        {
          initialRouteName: 'Tab'
        }
      );


      //export default createAppContainer(LoggedInNavigator, screens);

      export default createAppContainer(switcher);

Answer 1

那些你想让底部导航对它们可见的组件必须在 createBottomTabNavigator 中配置。
您可以像这样使用嵌套导航:

const screens = createStackNavigator({
        Import,
        Export,
        Ozone,
        Local,
        International,
        Edit,
        Forgot,
        Account,
        Welcome,
        Login,
        SignUp,
        Explore,
        Browse,
        Product,
        Settings,
      }, {
        navigationOptions: {
          tabBarVisible: true,
          animationEnabled: true,
        },
      });

const LoggedInNavigator = createBottomTabNavigator({
        Orion,
        Payment,
        Results,
        Notification,
        Predictions,
        Screens: screens // <== Nested stackNavigator inside bottomTabNavigator
      }, {
        initialRouteName: 'Results',
        tabBarOptions: {
          tabBarVisible: true,
          animationEnabled: true,
          showLabel: false,
          marginBottom: 5,
          activeTintColor: 'red',
          inactiveTintColor: '#grey',
          style: {
            backgroundColor: '#FAFAFA',
          }
        },
      }
      );

这取决于每个选项卡中应该包含哪些组件! 您可以为每个选项卡创建 stackNavigator 并将它们放在 createBottomNavigator 中。