react-native – 修改index.js后的黑屏

我正在线上学习如何使用React.

教师让我创建了一个名为专辑的项目并修改了index.js的内容,但是我在ios模拟器上得到了一个黑屏.

我做了什么(遵循教练的详细信息)：

1)创建一个新项目react-native init-albums

2)使用cd album输入项目目录

3)运行react-native run-ios

4)我可以在模拟器屏幕上看到App.js文件中的内容(我假设的初始屏幕 – 任何新的React Native项目).
按Cmd R重新加载,Cmd D或摇动开发菜单等.

5)删除index.js中的内容并将其替换为：

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

const App = () => {
 return <Text>Some Text</Text>;
};

AppRegistry.registerComponent("albums", () => App);

它应该出现在模拟器左上角的Some Text但它没有.屏幕是黑色的.
我究竟做错了什么？

您需要为您的应用程序定义背景颜色.您还应该从react-native导入View

import { AppRegistry, Text, View } from "react-native";

const App = () => {
 return (
   <View style={{backgroundColor: 'white', flex:1}}>
     <Text>Some Text</Text>
   </View>
  );
};

它是黑色的原因是因为在AppDelegate.m中rootView backgroundColor已在版本0.58.0中更改

在之前的版本中它是

rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

它现在在0.58中如下.

rootView.backgroundColor = [UIColor blackColor];