当前位置 : 主页 > 网络编程 > JavaScript >

通过制作一段闪烁的文字,演示state的用法

来源:互联网 收集:自由互联 发布时间:2021-06-30
ReactNative - BlinkApp // http://reactnative.cn/docs/next/state.htmlimport React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Blink extends Component { constructor(props) { super(props); this.stat
ReactNative - BlinkApp
// http://reactnative.cn/docs/next/state.html
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 (
      
 
  {display}
 
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
网友评论