如何在 React Native 中使用标签导航 createBottomTabNavigator

Question

我正在尝试获取一个简单的选项卡导航示例以在 React Native 中工作。似乎在线示例都假设选项卡导航屏幕是您应用程序中的唯一屏幕，但对我而言并非如此。在我的应用程序中，我会有一个登录页面，成功登录后会有一个选项卡导航屏幕，我称之为 DashboardTabScreen。该应用程序将有其他（非选项卡）屏幕可用（例如“设置”或“联系我们”等），并且每个选项卡屏幕都将是其他 "detail" 个屏幕堆栈的根。

这是我的 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 尝试升级然后检查。

如何在 React Native 中使用标签导航 createBottomTabNavigator

How to use tab navigation createBottomTabNavigator in react native

react-native

react-navigation

react-native-tabnavigator

react-navigation-bottom-tab