时间戳

首页 > 解决方案 > StackNavigator 和 TabNavigaor 在 react-native 中已弃用

react-native - StackNavigator 和 TabNavigaor 在 react-native 中已弃用

问题描述

在我的项目中，更新节点模块后，反应导航显示了一些问题。在控制台中它说， 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
  }
);

我该如何解决这些错误？

标签： react-native

解决方案

是因为版本升级react-navigation。您可能已升级到该软件包的 v2。

他们有该版本的文档，但仍然不完整，并且缺少一些细节。您可以在此链接中查看文档

v1 和 v2 的配置不同。你可以设法让 v2 ​​工作有一些困难。您可以在此处或在其他问题中询问您在该过程中遇到的具体困难。但是，如果您觉得仍然很困难，您可以返回到有据可查的较低版本。

推荐阅读