React Native Props & State

Today I knocked at the slightest bit of code and looked at the usage of props and state.

Originally thought that State is just a status, but read the original text, only to know that state is a set of state, these states are defined by the developers themselves, are unified under the big class of States, like props is

This.props.propertyName

This.state.stateName

In this form, props and state are two types of control components, props is a developer-defined component parameter, which states a status that is used to control the contents of the component

/**
* Sample React Native App
* Https://github.com/facebook/react-native
* @flow
*/

Import React, {Component} from ' React ';

Import {
Appregistry,
StyleSheet,
Text,
View,
Image,
} from ' React-native '

Class Blink extends component{

Constructor (props) {
Super (props);
This.state = {Showtext:true,showredcolor:false};

Toggle the state every second
SetInterval (() = {
This.setstate ({showtext:!this.state.showtext, Showredcolor:!this.state.showredcolor});
}, 1000);
}

Render () {
Let display = This.state.showText? This.props.text: ";
display = This.state.showRedColor? "Red color text":d isplay
Return (
<Text> {display}</text>
);
}
}

class Blinkapp extends component{
render () {
Return (
<View>
<blink text= ' I love to Blink '/>
<blink text= ' Yes blinking are so great '/>
<blink text= ' Why does they ever take this out of HTML '/>
<blink text= ' look at me look at me look at me '/>
<redtextview rdname= ' This is a text '/>
<redtextview rdname= ' has not set color yet. ' />
<redtextview rdname= ' End '/>
<bluetextview blname= ' Blue name begin '/>
<bluetextview blname= ' have not set color yet '/>
<bluetextview blname= ' Blue name end '/>
</View>
)
}
}

Class Redtextview extends component{

Render () {
Return (
<View>
<Text>{this.props.rdName}</Text>
</View>
)
}
}

Class Bluetextview extends component{

Render () {
Return (
<View>
<Text>{this.props.blName}</Text>
</View>
)
}
}

Appregistry.registercomponent (' HelloWorld ', () = Blinkapp);

React Native Props & State