Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

react native - Black screen after modifying index.js

I am following a tutorial online to learn how to use React.

The instructor made me create a project called albums and modify the content of index.js, however I get a black screen on the ios simulator.

What I did (following the instructor's details):

1) Create a new project react-native init-albums

2) Enter the project directory with cd albums

3) Run react-native run-ios

4) I can see on the simulator screen what is inside the file App.js (The initial screen of - I assume - any new React Native project). Press Cmd+R to reload, Cmd+D or shake for dev menu etc.

5) Delete the content inside index.js and replace it with:

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

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

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

It should appear Some Text on the top left of the simulator BUT it does not. The screen is black. What am I doing wrong?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to define a background color for you application. You should also import View from react-native

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

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

The reason that it is black is because the in the AppDelegate.m the rootView backgroundColor has been changed in version 0.58.0

In prior versions it was

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

It is now the following in 0.58.+

rootView.backgroundColor = [UIColor blackColor];

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...