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

Question

我正在按照在线教程学习如何使用 React。

老师让我创建了一个名为albums的项目并修改了index.js的内容，但是我在ios模拟器上黑屏了。

我做了什么(根据讲师的详细信息):

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

2)进入项目目录cd albums

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 但它没有。屏幕是黑色的。我做错了什么？

Answer 1

您需要为您的应用程序定义背景颜色。您还应该从 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];