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我还没有使用过，但看起来它被放入了自己的名为{ '$near': { '$geometry': { type: 'Point', coordinates: [Array] }, '$minDistance': '0', '$maxDistance': '10000' } }的软件包中，需要从那里安装和提取。

Answer 2

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

他们有该版本的文档，但仍然不完整，缺少一些细节。您可以在此link

中查看文档

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

StackNavigator和TabNavigaor在react-native

2 个答案: