Как использовать навигацию по вкладкам createBottomTabNavigator в React Native

Question

Я пытаюсь получить простой пример навигации по вкладкам для работы в react native. Похоже, что все примеры в Интернете предполагают, что экран навигации по вкладкам является единственным экраном в вашем приложении, что не относится ко мне. В моем приложении у меня будет страница входа, а после успешного входа будет экран навигации по вкладкам, который я называю DashboardTabScreen. В приложении будут доступны другие экраны (без вкладок) (например, «Настройки» или «Свяжитесь с нами» или что-то еще), и каждый из экранов с вкладками будет root из стопки других экранов с «подробностями».

Итак вот мое приложение. js:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from "./src/screens/LoginScreen";
import DashboardTabScreen from "./src/screens/DashboardTabScreen";

const navigator = createStackNavigator(
  {
    Login: LoginScreen,
    DashboardTab: DashboardTabScreen
  },
  {
    initialRouteName: "Login",
    defaultNavigationOptions: {
      title: "App"
    }
  }
);

export default createAppContainer(navigator);

А вот мой DashboardTabScreen. js

import React, {Component} from "react";
import { Text, StyleSheet, View } from "react-native";
import { createBottomTabNavigator } from 'react-navigation-tabs';

const FirstScreen = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>First!</Text>
      </View>
    );
}

const SecondScreen = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Second!</Text>
      </View>
    );
}

const DashboardTabScreen = createBottomTabNavigator(
    {   
        First: {
            screen: FirstScreen,
        },
        Second: {
            screen: SecondScreen,
        }
    }
);

export default DashboardTabScreen;

Когда я запускаю приложение, оно переходит на экран входа в систему, как и ожидалось . После успешного входа на эту вкладку панели инструментов он должен go. Вместо этого выдает ошибку:

Invariant violation: Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got undefined. You likely forgot to export 
your component from the file it is defined in, or you might have mixed up default and named 
imports.

А вот и мой пакет. json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.4.1",
    "@react-navigation/core": "react-navigation/core",
    "@react-navigation/native": "^5.2.6",
    "@react-navigation/stack": "5.2.3",
    "expo": "~36.0.0",
    "n": "^6.5.1",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.6.4",
    "react-native-screens": "^2.7.0",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.0.16",
    "react-navigation-tabs": "^1.2.0",
    "stable": "^0.1.8"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "babel-preset-expo": "~8.0.0"
  },
  "private": true
}

Так что же не так с моим кодом?

Answer 1

Проблема с react-navigation-tabs попробуйте обновить, а затем проверьте.

Answer 2

Я пробовал ваш код, он работает отлично, в вашем коде нет ошибок:

Думаю, проблема в версии react-navigation-tabs:

change:

"react-navigation-tabs": "^1.2.0",

на

"react-navigation-tabs": "^2.8.7"

Надеюсь, это поможет!