Используйте как StackNavigator, так и BottomTabNavigator - PullRequest
Новая
       116

Используйте как StackNavigator, так и BottomTabNavigator

0 голосов
/ 07 августа 2020

Мне нужно несколько экранов без нижней вкладки и несколько экранов с нижней вкладкой.

Вот мои зависимости: 

"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?

1 Ответ

0 голосов
/ 07 августа 2020

Вы можете использовать react-native-best-viewpager , чтобы сделать нижнюю навигацию, если хотите. (Я знаю, что он не полностью отвечает на ваш вопрос, но он помогает и проще, поэтому мне нужно добавить его сюда)

...