Question

任何人都可以帮助我解决这个问题。最近我在react-native项目中工作，我想在添加所有代码后创建底部标签导航，它将显示这样的错误

   And these are the packages included
  "dependencies": {
    "@react-navigation/native": "^5.1.4",
    "react": "16.9.0",
    "react-native": "0.61.4",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "^1.7.1",
    "react-native-router-flux": "^4.0.6",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-material-bottom-tabs": "^2.2.5",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }

这是用于创建导航的代码（App.js）

 import {TabScreen} from './src/Container/TabScreen';
    import LoginPage from './src/Container/LoginPage/LoginPage';
    import AuthLoadingPage from './src/Container/AuthLoadingPage/AuthLoadingPage';
    import {createSwitchNavigator} from 'react-navigation';
    import {createStackNavigator} from 'react-navigation-stack';
    import {createAppContainer} from '@react-navigation/native';

    const AppStack = createStackNavigator({TabScreen});
    const AuthStack = createStackNavigator({Signin: LoginPage});

    const App = createAppContainer(
      createSwitchNavigator(
        {
          Starter: AuthLoadingPage,
          App: AppStack,
          Auth: AuthStack,
        },
        {
          initialRouteName: 'Starter',
        },
      ),
    );

export default App;

仅在标签屏幕中，我创建了下标签导航（TabScreen.js）

import React from 'react';
import {AsyncStorage} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from 'react-navigation-tabs';

import HomeScreen from './HomeScreen';
import SettingScreen from './SettingScreen';

// const SignoutScreen = () => {}

export const TabScreen = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({tintColor}) => (
          <Ionicons name="ios-home" color={tintColor} size={25} />
        ),
      },
    },
    Settings: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: ({tintColor}) => (
          <Ionicons name="ios-settings" color={tintColor} size={25} />
        ),
      },
    },
    Settings1: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: ({tintColor}) => (
          <Ionicons name="ios-settings" color={tintColor} size={25} />
        ),
      },
    },

  {
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
      showIcon: true,
    },
  },
);

Answer 1

尝试npm install重新安装所有节点模块。

Answer 2

在导航文件中用createAppContainer替换createNavigationContainer

从“ @ react-navigation / native”导入createAppContainer

我想创建底部标签导航，但失败并显示错误

2 个答案: