React Native 3: Write a Hello World, reactnative from scratch

React Native 3: Write a Hello World, reactnative from scratch

This is the third article on React Native.

1. Environment Configuration

2. My first application

Why delete all the code in index. ios. js? Because we are going to write an application from scratch ~ The best way to learn the technology is to write your own code. It is not as effective as writing your own code one hundred times ~

We have to do the following two steps:

1. Create Components

2. display the created component on the app

Open the index. ios. js file and enter

var HelloWorld = React.createClass({  render: function () {    return (        <View>          <Text>            Hello World          </Text>        </View>      )     }});

Find the React document and you will see the description of createClass.

ReactClass createClass(object specification)

Create a component class by passing in a description Description (specification). The created component class must implement the render method, and the render method can return only one node, of course, this node can contain any number of subnodes.

As we have created a HelloWorld component class above, which implements the render method. This method only returns the <View> subnode. Of course, the <View> node also contains the <Text> node.

The first step is complete. You see, it's so simple ~

Next let's start step 2.

AppRegistry.registerComponent('AwesomeProject', function() {  return HelloWorld;});

AppRegistry is an entry for applications running React Native. The root component of an application must call AppRegistry. the registerComponent method registers itself to the application so that the native system can load and call AppRegistry correctly. runApplication to run the application.

In our project, the root component is our HelloWorld. As to why the first parameter is AwesomeProject, see the api.

static registerComponent(appKey: string, getComponentFunc: ComponentProvider) 

The first parameter refers to the appKey. If you still remember it, the name of the project template generated through the react native command line is called Awesome ~ Of course, this name can be changed. As for how to change it, we will talk about it later. Now we should keep this name first.

After these two tasks are completed, switch back to the simulator and refresh the CMD + R (note that the server must be in the running status ~ If the server is stopped, do you still remember the npm start command ~ If you don't remember, please read the previous tutorials ~ Of course, a large red error message may also appear on the interface ~~ Var React = require ('react-native '); var AppRegistry = react. AppRegistry; var View = React. View; var Text = React. Text;

Because AppRegistry, View, and Text are attributes of React, the introduction method is different from React ~

Open the simulator and refresh CMD + R. You can see that hello world is displayed on the interface ~ It's just a bit embarrassing.

To make this display in the middle, we add some styles for it ~

The first step is to introduce the StyleSheet variable. Add the following code at the end of the variable introduction:

var StyleSheet = React.StyleSheet;

Then, on the top of the AppRegistry. registerComponent method (in fact, the location does not matter. You only need to introduce the variable. The reason for writing it in front of registerComponent is just to make the Code look better ~), Add

var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center'  }});

We will explain StyleSheet later. Now we only need to know That StyleSheet is a style abstraction, similar to CSS. In the preceding style, we define the container as horizontal and vertical center.

Modify the HelloWorld component and add the style we set for it.

var HelloWorld = React.createClass({  render: function () {    return (        <View style={styles.container}>          <Text>            Hello World          </Text>        </View>      )     }});

Success ~ Refresh the simulator and you will be able to see the word "Hello World" in the middle of the iphone ~