android - 基本的 react native 应用程序不显示任何文本,仅在模拟器上显示带有应用程序名称的白屏

标签 android ios reactjs react-native

我正在尝试运行简单的 react native 应用程序。只需发短信“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 在模拟器上运行应用程序 但我只能看到空白屏幕,上面有应用程序名称..

enter image description here

..我创建的其他基本应用程序也发生过这种情况... 出了什么问题或者我失踪了...

最佳答案

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

关于android - 基本的 react native 应用程序不显示任何文本,仅在模拟器上显示带有应用程序名称的白屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58836726/

相关文章:

javascript - React-redux 应用程序不会延迟刷新存储

javascript - 过滤react-multi-select时如何调用服务器

android - gradle if条款 “api”或 “compileOnly”依赖项

ios - viewDidLoad 与调用 super viewDidLoad

java - onDraw 不适用于 Android ImageView

ios - 使用 pangesturerecognizer 创建边界以阻止对象进入状态栏下方?

ios - 无法获取地点 - REQUEST_DENIED

javascript - 警告 : isMounted(. ..) 在普通 Javascript 类中已被弃用

java - 如何以编程方式确定android是否连接到wifi?

android - 在没有 SearchView 的情况下启动默认搜索 Activity