React-Native 動態屬性state
阿新 • • 發佈:2019-01-10
如果是需要涉及到動態變化,就需要使用state這個屬性了
示例如下:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對showText狀態做一次取反操作
setInterval(() => {
this .setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根據當前showText的值決定是否顯示text內容
let display = this.state.showText ? this.props.text : ' ';
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' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp' , () => BlinkApp);
其中setInterval()屬於定時器函式,用於定時執行相關邏輯。
this.props.text 指的是Blink裡面text屬性的值。
this.setState()用於設定state的屬性值。
this.setState(previousState => {
return { showText: !previousState.showText };
});
以上這句的意思是使用setState(previousState);而previousState這個值是由以下決定的
{
return { showText: !previousState.showText };
}