createMaterialTopTabNavigator()已移动到‘react-navigation tabs’error react-native

Question

在我的一个旧项目中，我已经从react-Navigation3升级到react-Navigation4，当我尝试运行时，我得到了这个“createMaterialTopTabNavigator()已经移动到' react-navigation -tabs‘”的错误。在我的其他项目中，代码工作得很好。我甚至删除了node_modules并重新安装了它，但我仍然收到这个错误。有人能帮我解决这个问题吗？

这是我的App.js

import {createAppContainer, createSwitchNavigator, NavigationActions} from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createDrawerNavigator, DrawerNavigatorItems, DrawerActions } from 'react-navigation-drawer';

const TabNavigator = createMaterialTopTabNavigator(
{
  Upcoming: { screen: UpcomingScreen },
  Accepted: { screen: AcceptedScreen },
  Ongoing: { screen: OngoingScreen },
  Completed: { screen: CompletedScreen },
},
{
  tabBarOptions: {
      activeTintColor: '#000000',
      inactiveTintColor: '#000000',
      upperCaseLabel: false,
      style: {
        backgroundColor: '#ffffff',
        paddingTop: calcHeight(2)
      },
      labelStyle: {
        textAlign: 'center',
        fontSize: 12,
        fontFamily: Fonts.LatoRegular,
        fontWeight: 'normal'
      },
      indicatorStyle: {
        borderBottomColor: '#365888',
        borderBottomWidth: 2,
      },
  },
},
);

这是package.json

{
  "name": "rttDriver",
  "version": "0.0.1",
  "private": true,
  "rnpm": {
      "assets": [
      "./assets/fonts"
    ]
  },
  "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
  },
  "dependencies": {
  "@react-native-community/async-storage": "^1.6.1",
  "moment": "^2.24.0",
  "react": "16.8.3",
  "react-native": "0.59.9",
  "react-native-elements": "^1.1.0",
  "react-native-geolocation-service": "^3.0.0",
  "react-native-gesture-handler": "^1.4.1",
  "react-native-image-picker": "^0.28.0",
  "react-native-popup-dialog": "^0.18.3",
  "react-native-reanimated": "^1.3.0",
  "react-native-screens": "^1.0.0-alpha.23",
  "react-native-signature-capture": "^0.4.9",
  "react-native-svg": "^9.11.1",
  "react-native-svg-uri": "^1.2.3",
  "react-native-swiper": "^1.5.14",
  "react-native-vector-icons": "^6.6.0",
  "react-navigation": "^4.0.10",
  "react-navigation-drawer": "^1.4.0",
  "react-navigation-stack": "^1.9.4",
  "react-navigation-tabs": "^2.0.0-alpha.0"
  },
 "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/runtime": "7.5.5",
    "babel-jest": "24.9.0",
    "jest": "24.9.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "0.56.0",
    "react-test-renderer": "16.8.3"
 },
 "jest": {
    "preset": "react-native"
  }
 }

我附上了下面的图片

​

​

Answer 1

您使用的是react navigatin v4.x.x，在这个版本中，所有类型的导航都被移到单独的子库中，请从react-navigatin-tabs导入您的材料顶部导航器。

import createMaterialTopTabNavigator from 'react-navigation-tabs';

Answer 2

升级https://github.com/react-navigation/react-navigation/releases/tag/v4.0.0时请阅读发行说明

Answer 3

只需输入

npm install @react-navigation/bottom-tabs

进入终端并重新启动它