如何在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.

这是我的包.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上，请尝试升级，然后进行检查。