React native的組件可以通過兩種方式進(jìn)行狀態(tài)控制，一種是Props用來設(shè)置不會(huì)改變的數(shù)據(jù)，另一種就是State嚼沿，用來設(shè)置會(huì)變換的數(shù)據(jù)宣脉。State相當(dāng)重要车柠，所有的UI界面變化都離不開State。
State的使用方式是：
- 在組件的構(gòu)造函數(shù)中初始化State；
- 在合適的地方調(diào)用setState方法竹祷；
首先來看官方的例子谈跛，官方給出了一個(gè)文字閃爍的效果，具體代碼
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};//這里設(shè)置了一個(gè)boolean型的showText塑陵，默認(rèn)值為true感憾；
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);//這里是一個(gè)定時(shí)器，每1s會(huì)執(zhí)行一次令花，調(diào)用定時(shí)器中的方法阻桅，重新給state賦值，注意this.state.showText是獲取當(dāng)前showText的值兼都，同時(shí)需要注意的是調(diào)用this.setState()后回自動(dòng)調(diào)用 render() 方法從而實(shí)現(xiàn)界面的刷新嫂沉。
}
render() {
let display = this.state.showText ? this.props.text : ' ';//這里通過showText 的值決定diaplay的值，如果為ture 則顯示this.props.text屬性的值扮碧，否則顯示‘ ’趟章，this.props.text為自定義屬性，let等同于var慎王；
return (
<Text>{display}</Text>
);
}
}
在啟動(dòng)組件中使用
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' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
顯示結(jié)果如下：
再來看一個(gè)其他的例子：
我們要實(shí)現(xiàn)這樣一個(gè)效果
點(diǎn)擊按鈕改變按鈕的背景色尤揣，來看代碼
class MyButton extends Component{
constructor(props) {
super(props);
this.state = {clickable:false};
}
toggleColor=()=> {
this.setState({
clickable:!this.state.clickable
})
}
render(){
return(
<TouchableOpacity onPress={this.toggleColor}>
<View style={{justifyContent:'center',alignItems:'center',width:100,height:56,backgroundColor:this.state.clickable?'#ff00ff':'#00ffff'}}>
<Text >點(diǎn)我</Text>
</View>
</TouchableOpacity>
);
}
}
具體流程如下：
1 定義了一個(gè)MyButton 組件；
2在MyButton 的構(gòu)造函數(shù)中聲明了一個(gè)clickable柬祠；
3定義一個(gè)toggleColor方法并在其中通過this.setState完成clickable值的改變北戏；
4在render函數(shù)中通過TouchableOpacity 自定義了一個(gè)button，并通過onPress調(diào)用toggleColor方法漫蛔。
調(diào)用MyButton
class HelloWorld extends Component{
render(){
return(
<View style={{justifyContent:'center',alignItems:'center',flex:1}}>
<MyButton/>
</View>
);
}
}
顯示效果如上圖所示嗜愈。
State的使用也就是這些了，關(guān)鍵是記住其使用方式即可莽龟。
