In layman's react Native 3: Write a Hello World from scratch

This is the third article in layman's react native.

1. Environment configuration

2. My first Application

Delete all the code in the Index.ios.js, why delete it? Because we are going to write an application from scratch ~ The best way to learn technology is to write it yourself, to see someone else's code 100 times the effect is not as good as your own write over the effect of the big ~

The main things we have to do are divided into the following two steps:

1. Creating components

2. Display the created components on the app

Open a. index.ios.js file, enter

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

Find the react document to see a description of the Createclass

Reactclass Createclass (Object specification)

By passing in a description description (specification) to create a component class, the component class created must implement the Render method, and the Render method can only return one node, although the node can contain any number of child nodes.

Like above we have created a HelloWorld component class that implements the Render method, which returns only <View> this child node and, of course, the <Text> node under the <View> node.

The first step is complete, you see, it is so simple ~

Let's start with the second step.

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

Appregistry is a portal to applications that run react native. The root component of an application must register itself in the app by calling the Appregistry.registercomponent method so that the native system loads correctly and runs the application by calling Appregistry.runapplication.

In our project, the root component is our HelloWorld, as for why the first parameter is Awesomeproject, see the API can be seen

The first parameter refers to the Appkey, if you remember, we react native command line generated by the name of the project template is called awesome~ of course, the name can be changed, as for how to change, we will say later, now the first to maintain the name.

After these two things are done, switch back to the emulator, cmd+r Refresh (note that the server to keep running state Oh ~ If the server is stopped, the NPM start command, remember ~ do not remember the words please look at the previous tutorial OH), ah, how God horse are not ~ of course, There may also be a large red error message on the interface ~ ~

Open Xcode to see one of these errors:

The system cannot find the react variable we use, so the error is not only react we have no definition, appregistry, View, text we have no definition ~ so we want to talk about react native definition of these variables introduced ~

Add the following code to the top of the Index.ios.js file ~

 
 
var React = require(‘react-native‘);
var AppRegistry = React.AppRegistry;
var View = React.View;
var Text = React.Text;

Because Appregistry, View, text is a property of react, so the introduction is different from react ~

Open the emulator, cmd+r refresh, you can see Hello World is displayed on the interface ~ just ... Location is a bit awkward.

To make this appear in the middle, we add some style~ to it

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

var StyleSheet = React.stylesheet;

Then in the Appregistry.registercomponent method above (in fact, the position does not matter, just need to introduce the variable under it, the reason is written in front of RegisterComponent, just for the code looks good ~), add

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

We'll explain stylesheet in a follow-up, now just to be aware that stylesheet is a style of abstraction, similar to CSS. In the style above, we define container as horizontal and vertical centering.

Modify the HelloWorld component to add the style that we set to it.

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

Get it done-refresh on the simulator and you'll see the word Hello World in the middle of the iphone ~

In layman's react Native 3: Write a Hello World from scratch