应用程序正在运行，但我在屏幕上看不到任何内容答案

【问题标题】：Application is running but I cannot see anything on the screen应用程序正在运行，但我在屏幕上看不到任何内容
【发布时间】：2021-09-13 04:09:33
【问题描述】：

我正在开发 React Native 应用程序。我有两个组件Home 和About。我将它们导入App.js。我正在使用createBottomTabNavigator。以下是我的App.js 文件。

import 'react-native-gesture-handler';
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';

const Tab = createBottomTabNavigator();

const App: () => Node = () => {
  return (
    <NavigationContainer initialRouteName="Home">
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="About" component={AboutScreen} />
    </NavigationContainer>
  );
};

export default App;

这是我的组件。

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', color: 'red' }}>
      <Text>Home Screen</Text>
    </View>
  )
}

关于

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

export default function AboutScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>About Screen</Text>
    </View>
  )
}

此应用程序运行后，我在屏幕上看不到任何内容。这是输出。

现在我做错了什么，我该如何解决？

按照@nithinpp 的回答，我现在收到此错误。

Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.
MaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123520:24
RCTView
View
MaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123489:23
RNCSafeAreaProvider
SafeAreaProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:121702:24
SafeAreaProviderCompat@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123278:24
BottomTabView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:111962:30
BottomTabNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:111824:32
EnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:116000:24
BaseNavigationContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:115512:28
ThemeProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:121023:21
NavigationContainerInner@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:120883:26
App
RCTView
View
RCTView
View
AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:75604:36
mynio(RootComponent)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:82460:28
 ERROR  Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`.
MaybeScreen@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123520:24
RCTView
View
MaybeScreenContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123489:23
RNCSafeAreaProvider
SafeAreaProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:121702:24
SafeAreaProviderCompat@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:123278:24
BottomTabView@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:111962:30
BottomTabNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:111824:32
EnsureSingleNavigator@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:116000:24
BaseNavigationContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:115512:28
ThemeProvider@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:121023:21
NavigationContainerInner@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:120883:26
App
RCTView
View
RCTView
View
AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:75604:36
mynio(RootComponent)@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false&app=com.mynio&modulesOnly=false&runModule=true:82460:28
 ERROR  TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[6], "@react-navigation/elements").ResourceSavingView')

This error is located at:
    in MaybeScreen (at BottomTabView.tsx:122)
    in RCTView (at View.js:32)
    in View (at ScreenFallback.tsx:31)
    in MaybeScreenContainer (at BottomTabView.tsx:93)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at BottomTabView.tsx:92)
    in BottomTabView (at createBottomTabNavigator.tsx:112)
    in Unknown (at createBottomTabNavigator.tsx:111)
    in BottomTabNavigator (at App.js:44)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:43)
    in App (at renderApplication.js:48)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:133)
    in AppContainer (at renderApplication.js:41)
    in mynio(RootComponent) (at renderApplication.js:57)
 ERROR  TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[6], "@react-navigation/elements").ResourceSavingView')

This error is located at:
    in MaybeScreen (at BottomTabView.tsx:122)
    in RCTView (at View.js:32)
    in View (at ScreenFallback.tsx:31)
    in MaybeScreenContainer (at BottomTabView.tsx:93)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at BottomTabView.tsx:92)
    in BottomTabView (at createBottomTabNavigator.tsx:112)
    in Unknown (at createBottomTabNavigator.tsx:111)
    in BottomTabNavigator (at App.js:44)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:429)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:43)
    in App (at renderApplication.js:48)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:133)
    in AppContainer (at renderApplication.js:41)
    in mynio(RootComponent) (at renderApplication.js:57)

【问题讨论】：

好像你已经添加了另一个屏幕MaybeScreen和导入库@react-navigation/elements？
不，我不是。我没有另一个屏幕。至少我没有在任何地方看到它，我也没有创建它。
您可以尝试重新启动捆绑程序并重试吗？ yarn start --reset-cache
刚刚做了同样的错误。
我认为错误在某处in BottomTabView (at createBottomTabNavigator.tsx:112) in Unknown (at createBottomTabNavigator.tsx:111)

标签： reactjs react-native react-navigation

【解决方案1】：

您必须将Tab.Screen 包裹在Tab.Navigator 中。这会将这些屏幕注册到使用createBottomTabNavigator();创建的变量中

只需更改您的App.js 即可返回

const App: () => Node = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="About" component={AboutScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

https://snack.expo.dev/@nithinpp69/amused-hummus

【讨论】：

我做了你提到的，但现在我遇到了另一个错误。我在我的帖子中发布了这个错误。可以看看吗？