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

Question

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

Итак, вот мой App.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;

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

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.

А вот и мой package.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 версия:

менять:

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

к

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

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

Answer 2

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