在反应本机中不推荐使用StackNavigator和TabNavigaor

Question

在我的项目中,更新节点模块后,反应导航显示出一些问题.在控制台中,它说, tabBarBottom已被弃用.使用react-navigation-tabs包.不推荐使用stackNavigator函数名.不建议使用createStackNavigator tabNavigator.使用createBottomTabNavigator

import React from "react";
import { StackNavigator } from "react-navigation";
import { TabNavFooter } from "./TabNavFooter";
import { SIGNIN_KEY, SIGNUP_KEY } from "../config/routeKeys";
import {
  SignupScreen,
  SigninScreen,
  MainFeedScreen,
  CommentScreen,
  SharePostScreen
} from "../screens";

export const Routes = StackNavigator({
  mainfeed: { screen: TabNavFooter },
  signin: { screen: SigninScreen },
  signup: { screen: SignupScreen },
  comments: { screen: CommentScreen },
  sharePost: { screen: SharePostScreen }
});


import React from "react";
import { TabNavigator, TabBarBottom } from "react-navigation";
import { ClickableImage, ClickableIcon } from "../mixing/UI";
import TAB_NAVIGATOR_IMAGES from "../config/tabNavImgs";
import { Image } from "react-native";

import {
  MainFeedScreen,
  WorkoutScreen,
  VideosScreen,
  ChatScreen,
  ProfileMainScreen
} from "../screens";

export const TabNavFooter = TabNavigator(
  {
    mainfeed: { screen: MainFeedScreen },
    workout: { screen: WorkoutScreen },
    video: { screen: VideosScreen },
    chat: { screen: ChatScreen },
    profile: { screen: ProfileMainScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let imageSource;

        if (routeName === "mainfeed") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "mainfeedActive" : "mainfeedInactive"}`
            ];
        } else if (routeName === "workout") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "workoutActive" : "workoutInactive"}`
            ];
        } else if (routeName === "video") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "videoActive" : "videoInactive"}`
            ];
        } else if (routeName === "chat") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[`${focused ? "chatActive" : "chatInactive"}`];
        } else if (routeName === "profile") {
          imageSource =
            TAB_NAVIGATOR_IMAGES[
              `${focused ? "profileActive" : "profileInactive"}`
            ];
        }

        return (
          <Image
            source={imageSource}
            style={{
              width: 25,
              height: 25,
              tintColor: tintColor,
              marginBottom: 0
            }}
          />
        );
      }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "blue",
      inactiveTintColor: "gray"
    },
    swipeEnabled: false,
    lazyLoad: true,
    animationEnabled: false
  }
);

我该如何解决这些错误？

Answer 1

替换StackNavigator为createStackNavigator.并TabNavigator用createBottomTabNavigator.

TabBarBottom我还没有使用过,但看起来它被放入了自己的包中react-navigation-tabs,需要从那里安装和拉出.

Answer 2

这是由于react-navigation版本升级.你可能已升级到包的v2.

他们有该版本的文档,但仍然不完整,缺少一些细节.你可以在这个链接中看到doc

v1和v2之间的配置不同.你可以设法让v2工作遇到一些困难.您可以在此处或其他问题中询问您在此过程中遇到的具体困难.但如果你发现仍然很难,你可以回到较低版本,这是有据可查的.