React Native Introduction (iii) props (attributes) and state (status) _react-native

Objective

This article describes the properties and status of Rn, as well as the use of UI styles such as style, which have appeared in the previous Hello World project, and then we can use these to build a few simple UI interfaces.

Also remember when setting up the Environment Init's Awesomeproject project, we import it into the Webstorm, the contents of the following can be changed inside the code.
about how to run, you can view the previous blog, here is not to repeat. Props (properties)

Most components can be customized using a variety of parameters when they are created. These parameters that are used for customization are called props (properties).

We still have to compare the properties of Android, such as TextView, Common width,height,text,padding, ImageView Src,scaletype, and so on, these are the properties of these controls.
Similarly, for the components in Rn, it also has a series of corresponding attributes, but the wording is somewhat different.

Here, for example, in the case of the image in Rn, the Imageview,image of Android is the component that is used to show the picture.
Then we need to use the image of this component, first of all needs to import in:

Import {
    appregistry,
    Image,
    StyleSheet,
    Text,
    View
} from ' react-native ';

We'll add image to the project and then we can use this component.
We randomly found a picture on the Internet. Then change the contents of the render () {} method to:

Let pic={
  uri: ' http://p4.music.126.net/cq1STvQ6q5b_Eg5grsTjYQ==/3275445147663993.jpg '
};

Load network picture, you must specify picture size return
(
  <view style={styles.container}>
    <image source={pic} style={{width: height:200}}/>
    <text style={styles.welcome}>this is a picture of Taylor swift</text>
  </ View>
);

Then we run it and look at the effect.

In code <image source={pic} style={{width:200, height:200}/> Source is the property of the component image, specifying the address of the picture to display. This property is very similar to the SRC attribute of ImageView.

One thing to note: {pic} has a layer of parentheses around it, and we need to embed the PIC variable in the JSX statement with parentheses. Parentheses mean that the parentheses are inside a JS variable or an expression, which needs to be performed after the value is taken. So we can embed any valid JavaScript expression into the JSX statement through parentheses.

Just put the address in the same place as we did:

<image Source={{uri: ' Http://p4.music.126.net/cq1STvQ6q5b_Eg5grsTjYQ==/3275445147663993.jpg '} style={{width: HEIGHT:200}}/>

In addition, the image component in the Load network picture, you must specify the width of the high, this first remember the line, about the picture we then do the discussion.

There is also the code let pic={...}; Let is the ES6 new command to declare variables. Its usage is similar to Var, but the declared variable is valid only in the block of code where the Let command is located.
The import,class,const mentioned above are es6** 's new command for declaring variables, plus the var,function already in ES5, there are 6 commands for declaring different variables. Styles Style

Here style is also the property of image, and almost all components have style this property, which is mainly used to set the width of the height, and is directly in the inside wrote {width:200, height:200}, but we still remember this project inside,

Const STYLES = stylesheet.create ({
  container: {
    flex:1,
    justifycontent: ' Center ',
    alignitems: ' Center ',
    backgroundcolor: ' #F5FCFF ',
  },
  welcome: {
    fontsize:20,
    textAlign: ' Center ',
    Margin:10,
  },
  instructions: {
    textAlign: ' Center ',
    color: ' #333333 ',
    marginbottom:5,
  },
});

Declare style outside, and then refer to the same.
From this point of view, style is more like a collection of attributes, the inside is a property, we have to set the attributes in the inside, and then a sentence to reference. This is very similar to the style inside Android.

With respect to style, these style names basically follow the name of the CSS on the web, but use the hump nomenclature as required by JS syntax, such as changing Background-color to BackgroundColor
The Style property can be an ordinary JavaScript object. This is the simplest usage, as in the example project. You can also pass in an array-the style object that is positioned in the array is higher than the precedence, so you can indirectly implement the inheritance of the style.
Like what:

<text style={[styles.container,styles.instructions]}>

Emphasis: The property declared later overrides the attribute with the same name that was declared first.
That is, if container and instructions, if there is an attribute with the same name, then the property in instructions works, and the property in container is invalid. Properties of custom components

As we said in our previous blog, you can extents component customize components, custom components can also use props, by customizing different properties in different scenarios, you can maximize the reuse scope of your custom components. Simply refer to the this.props in the render function and then handle it on demand.
For example, we are not this image, is a lot of stars of the picture, then we describe the picture, if or write a <Text/> for this is a picture of XXXX, that is too low. Therefore, we can separate the description below to form a component, and the star name as a property, you can reuse.
Customizing a component:

Class Description extends component{
  render () {return
    (
        <text Style={styles.welcome}>this is a Picture of {this.props.name}</text>
    );
  }

And then use this:

Return (
  <view style={styles.container}>
    <image source={pic} style={{width:200, height:200}}/>< C2/><description name= "Taylor Swift"/>
  </View>
);

The name here is a property of our custom component description, of course you can use other words as long as you write the same on the OK.

Reload again, found that the effect is the same. This.props.children

2018/2/26 Update
In general, the attributes that we use This.props to get are corresponding to the attributes that are passed in by the parent component, but there is a special props to note, that is this.props.children.
This.props.children is often used to perform traversal rendering by using a parent component that contains multiple indeterminate subassemblies. The most common application example: the banner or swiper used to display content in the app's home page.
So there are a few points to note: The number of lists and the uncertainty of the content, the parent component can be created to determine the use of This.props.children from the parent component to get the required display of the list item content Use the React.Children.map method to traverse the Children, set by item, this method returns an array object in which the elements in the array are child

A simple example of usage:

<Swiper>
  <view style={{backgroundcolor: ' Red '}}/>
  <view style={{backgroundcolor: ' Green '}}/ >
  <view style={{backgroundcolor: ' Blue '}}/>
</Swiper>

The Render method of Swiper

{
  React.Children.map (This.props.children, (child) => {return
    (
      {child}
    )}
  )
}

State (status)

Here, with the help of official website instructions:

We use two kinds of data to control a component: props and state. Props are specified in the parent component and, once specified, are not changed in the lifecycle of the specified component. For data that needs to be changed, we need to use state.
In general, you need to initialize state in constructor: This is ES6, and many of the early ES5 examples use the Getinitialstate method to initialize the state, which is gradually eliminated. Then call the SetState method when you need to modify it.

Through the above description, we found that the idea and Java code is very similar Ah, constructor as the name of the constructor, in the constructor to the state to initialize a value, and then if you need to modify, call the SetState method, also very good to understand.
Here's an official example, but we're still writing in Description:

Class Description extends Component {
  Constructor (props) {
    super (props);
    This.state = {Showtext:true};
    setinterval (() => {
      this.setstate (previousstate => {return {showtext) to Showtext state every 1000 milliseconds.
        :!previousstate.showtext};};}
    , 1000);

  Render () {
    ////depending on the value of the current Showtext to display the text content//
    Here's a little bit of change let
    text=, "This is a picture of" + this.props.name;
  let display = This.state.showText? Text: '  ;
    Return (
      <Text>{display}</Text>
    );
  }

Reload, you can see these words flash.

Places to look for:
Setinterval,settimeout and so on are the timer functions, which will be understood later.
As the official website said, we generally do not in the timer function (setinterval, settimeout, etc.) to operate the state, the typical scenario is to receive the server returned the new data, or after the user input data.
In contrast to Android, this is equivalent to simulating network request data and then delaying 1s to change the UI state. This is not good to understand a lot.
More high-end, you can use a number of "state containers" such as redux to unify the management of the data flow, this later to slowly understand. Conclusion

After this article, we learned about the properties and state of the component, as well as the styling style for the component, including custom components. So we can basically write some simple UI interface.
OK, let's do it first, see you in the next chapter.