Hello World 未在 React Native android 中显示

Question

嗨，我已经为 android 编写了Hello World程序react-native。我关注了这个https://facebook.github.io/react-native/docs/tutorial.html#content但它在启动应用程序时没有在屏幕上显示“Hello World”。

它正在显示空屏幕。我该如何解决这个问题。

索引.android.js

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

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

export default class AwesomeProject extends Component {
  render() {
    return (
        <Text>Hello World!</Text>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

构建日志

E:\React Programming\AwesomeProject>react-native run-android
Starting JS server...
Running C:\Users\ch-e00925\AppData\Local\Android\sdk/platform-tools/adb -s ZY223
8CX5L reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat install
Debug...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42321Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0350Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Moto G (4) - 6.0.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 1 mins 9.699 secs
Starting the app on ZY2238CX5L (C:\Users\ch-e00925\AppData\Local\Android\sdk/pla
tform-tools/adb -s ZY2238CX5L shell am start -n com.awesomeproject/.MainActivity
)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

Answer 1

您需要先使用react-native start启动正在运行的打包程序，然后使用react-native run-android来启动模拟器。

Answer 2

也许它显示了文本，但由于样式问题你看不到。尝试这样的事情：

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

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('Boxit', () => HelloWorldApp);