1. 程式人生 > >React-Native 動態屬性state

React-Native 動態屬性state

如果是需要涉及到動態變化,就需要使用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 };
      }