React Native props & state

Posted 2020-08-26 just coding

今天又敲了一丁点代码，看了一下props和state的用法

原本以为state只是一个状态，但是又阅读了一下原文，才知道state是一组状态，这些状态是开发者自己定义的，都统一在state这个大类底下，跟props一样都是

this.props.propertyName

this.state.stateName

这种形式，props和state是控制组件的两种类型，props是开发者自定义的组件参数，state表达的是一种状态用于控制组件的内容

/**
* 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":display
return (
<Text> {display}</Text>
);
}
}

class BlinkApp extends Component{
render(){
return (
<View>
<Blink text=‘I love to blink‘ />
<Blink text=‘Yes blinking is so great‘/>
<Blink text=‘Why did 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=‘have not set color yet.‘/>
<RedTextView rdName=‘end‘/>
<BlueTextView blName=‘blue name begin‘/>
<BlueTextView blName=‘has 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);