基本反应本机应用程序不显示任何文本，只有白色屏幕和模拟器上的应用程序名称

Posted 2023-03-12

【中文标题】基本反应本机应用程序不显示任何文本，只有白色屏幕和模拟器上的应用程序名称

【英文标题】：basic react native app not showing any text only white screen with app name on simulator

【发布时间】：2019-11-13 12:03:09

【问题描述】：

我正在尝试运行简单的反应原生应用程序。只需发短信“Hello World！”，它应该是我在 react native 中的第一个应用程序。下面是我的简单 app.js 文件

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import 
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
 from 'react-native';

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

const App: () => React$Node = () => 
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style=styles.scrollView>
          <Header />
          global.HermesInternal == null ? null : (
            <View style=styles.engine>
              <Text style=styles.footer>Engine: Hermes</Text>
            </View>
          )
          <View style=styles.body>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Step One</Text>
              <Text style=styles.sectionDescription>
                Edit <Text style=styles.highlight>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>See Your Changes</Text>
              <Text style=styles.sectionDescription>
                <ReloadInstructions />
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Debug</Text>
              <Text style=styles.sectionDescription>
                <DebugInstructions />
              </Text>
            </View>
            <View style=styles.sectionContainer>
              <Text style=styles.sectionTitle>Learn More</Text>
              <Text style=styles.sectionDescription>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
;

const styles = StyleSheet.create(
  scrollView: 
    backgroundColor: Colors.lighter,
  ,
  engine: 
    position: 'absolute',
    right: 0,
  ,
  body: 
    backgroundColor: Colors.white,
  ,
  sectionContainer: 
    marginTop: 32,
    paddingHorizontal: 24,
  ,
  sectionTitle: 
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  ,
  sectionDescription: 
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  ,
  highlight: 
    fontWeight: '700',
  ,
  footer: 
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  ,
);

export default App;

我从 react-native cli 开始，https://facebook.github.io/react-native/docs/getting-started（React-Native CLI 快速入门） 尝试使用 npx react-native run-ios 在模拟器上运行应用程序 但我只能看到带有应用名称的空白屏幕..

..这发生在我创建的其他基本应用程序中... 有什么问题或者我错过了......

【问题讨论】：

你好，你能告诉我你的 react-native-cli 的版本是什么吗？您可以使用以下命令找到它：react-native -v OR react-native --version

react-native-cli: 2.0.1 react-native: 0.61.4

它太奇怪了...我很困惑...你好世界基本应用程序至少应该打开..这里简单的应用程序也不起作用..

实际上，它对我有用。你检查过有没有错误？还有，你是不是用react-native init MyApp命令新建项目对不对？

你能简单地克隆这个项目吗？按以下顺序：npm ireact-native run-ios它应该可以工作。

【参考方案1】：

开始在 IOS 13 上正常工作...将 Xcode 更新到最新版本会有所帮助。