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进行底部导航。（我知道它不能完全回答您的问题，但是它可以帮助您，而且更容易，因此我需要在此处添加它）

同时使用StackNavigator和BottomTabNavigator

1 个答案: