时间戳

首页 > 解决方案 > 使用 createBottomTabNavigator 不显示任何内容

react-native - 使用 createBottomTabNavigator 不显示任何内容

问题描述

我正在尝试创建一个简单的应用程序，我的主屏幕可以选择在其他两个屏幕之间切换。我按照此处createBottomTabNavigator文档中的建议使用，但是当我运行时，我只有空白屏幕，仅此而已。我希望看到至少两个标签。npm start

我的 App.js 文件

 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MainScreen from './screens/MainScreen';
import MyNetworkScreen from './screens/MyNetworkScreen';

const Tab = createBottomTabNavigator();

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <NavigationContainer>
           <Tab.Navigator>
             <Tab.Screen name="Main" component={MainScreen} />
             <Tab.Screen name="Network" component={MyNetworkScreen} />
           </Tab.Navigator>
        </NavigationContainer>
     </View>
      );
     }
   }

  export default App;

编辑：我更新的依赖项来自package.json

"dependencies": {
      "@react-native-community/masked-view": "^0.1.10",
      "@react-native-community/netinfo": "^5.9.7",
      "@react-navigation/bottom-tabs": "^5.11.2",
      "@react-navigation/native": "^5.8.10",
      "@react-navigation/web": "^1.0.0-alpha.9",
      "aws-amplify": "^3.3.13",
      "aws-amplify-react-native": "^4.2.10",
      "expo": "~40.0.0",
      "expo-status-bar": "~1.0.3",
      "react": "16.13.1",
      "react-dom": "16.13.1",
      "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
      "react-native-gesture-handler": "^1.8.0",
      "react-native-reanimated": "^1.13.2",
      "react-native-safe-area-context": "^3.1.9",
      "react-native-screens": "^2.15.0",
      "react-native-web": "~0.13.12"   
  },

标签： react-nativereact-navigation-bottom-tab

解决方案

推荐阅读