React Native props & state

標籤：ext   lov   定義   textview   isp   統一   als   str   extend   

今天又敲了一丁點代碼，看了一下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);

React Native props & state