1

在我的一个旧项目中，我已经从 react-navigation 3 升级到 react-navigation 4，当我尝试运行时，我得到了这个“createMaterialTopTabNavigator() has beenmoved to '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"
  }
 }

我附上了下面的图片

这是我得到的错误

4

3 回答 3

2

看来您正在使用 react navigatin v4.xx，在此版本中，所有类型的导航都移至单独的子库中，请从 react-navigation-tabs 导入您的材料顶部导航器

import createMaterialTopTabNavigator from 'react-navigation-tabs';
于 2019-10-13T07:48:51.190 回答
0

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

于 2019-10-13T08:17:21.243 回答
0

只需输入

npm install @react-navigation/bottom-tabs

进入终端并重新启动它

于 2020-06-30T13:59:37.570 回答