同时使用 StackNavigator 和 BottomTabNavigator

Question

我需要一些没有底部标签的屏幕，以及一些带有底部标签的屏幕。

这是我的依赖项：

"dependencies": {
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-modals": "^0.19.9",
    "react-native-reanimated": "^1.10.2",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "^2.9.0"
  },

这是我放置两个逻辑的导航文件：

// Navigation/Navigation.js

import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";
import PasswordForgot from "./views/PasswordForgot";
import Login from "./views/Login";
import Signup from "./views/Signup";
import Index from "./views/Index";
import MyNotes from "./views/MyNotes";
import Feed from "./views/Feed";
import Discover from "./views/Discover";
import MyProfile from "./views/MyProfile";
import NewNote from "./views/NewNote";

const bottomTabNavigator = createBottomTabNavigator({
  MyNotes: {
    screen: MyNotes,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={25} color={tintColor} />
      ),
    },
  },
  Feed: {
    screen: Feed,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={25} color={tintColor} />
      ),
    },
  },
  NewNote: {
    screen: NewNote,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={25} color={tintColor} />
      ),
    },
  },
  Discover: {
    screen: Discover,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={25} color={tintColor} />
      ),
    },
  },
  MyProfile: {
    screen: MyProfile,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Icon name="home" size={25} color={tintColor} />
      ),
    },
  },
});

const screens = {
  MyNotes: {
    screen: MyNotes,
    navigationOptions: {
      header: null,
    },
  },
  Login: {
    screen: Login,
    navigationOptions: {
      header: null,
    },
  },
  Signup: {
    screen: Signup,
    navigationOptions: {
      header: null,
    },
  },
  Index: {
    screen: Index,
    navigationOptions: {
      header: null,
    },
  },
  PasswordForgot: {
    screen: PasswordForgot,
    navigationOptions: {
      header: null,
    },
  },
};

const HomeStack = createStackNavigator(screens, {
  initialRouteName: "Index",
});
export default createAppContainer(HomeStack);
export const AppBottomContainer = createAppContainer(bottomTabNavigator);

现在，虽然我可以使用导航属性（这意味着堆栈导航器 HomeStack 正在工作），但当我导入 AppBottomContainer 时，底部选项卡导航器永远不会显示。我在 Navigation.js 文件中做错了什么？

Answer 1

如果需要，您可以使用react-native-best-viewpager 进行底部导航。 （我知道它不能完全回答你的问题，但它有帮助，而且更容易，所以我需要在这里添加它）