如何在React Native中使用选项卡导航createBottomTabNavigator

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",

to

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

希望这会有所帮助！

Answer 2

问题出在react-navigation-tabs尝试升级然后检查它。