如何在本机反应中使用标签导航 createBottomTabNavigator答案

【问题标题】：How to use tab navigation createBottomTabNavigator in react native如何在本机反应中使用标签导航 createBottomTabNavigator
【发布时间】：2020-05-09 00:46:58
【问题描述】：

我正在尝试获取一个简单的选项卡导航示例以在本机反应中工作。似乎在线示例都假设选项卡导航屏幕是您的应用程序中唯一的屏幕，但对我而言并非如此。在我的应用程序中，我将有一个登录页面，成功登录后会有一个标签导航屏幕，我称之为 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
}

那么我的代码有什么问题？

【问题讨论】：

标签： react-native react-navigation react-native-tabnavigator react-navigation-bottom-tab

【解决方案1】：

我已经尝试过你的代码，它运行良好，你的代码没有错误：

我认为问题出在react-navigation-tabs 版本上：

改变：

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

到

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：