美文网首页
State(状态)

State(状态)

作者: 冷洪林 | 来源:发表于2016-12-21 11:53 被阅读6次
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';



class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class DTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Blink text='张三' />
        <Blink text='李四' />
        <Blink text='王五' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('DTest', () => DTest);

  • 效果(文字会每个1000毫秒改变隐藏或显示状态)

相关文章

  • State(状态)

    效果(文字会每个1000毫秒改变隐藏或显示状态)

  • 状态(State)

    意图 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。 结构 适用性 一个对象的行为取决于...

  • Flink基础系列26-Flink状态管理

    一. 状态概述: Flink中的状态: 算子状态(Operator State) 键控状态(Keyed State...

  • Lesson10组件的state和setState

    state 用来存储组件内的状态 setState用来修改state状态直接通过this.state.xxx = ...

  • React进阶-State&生命周期

    state state是指组件的当前状态。组件根据状态state呈现不同的UI展示。 一旦状态(数据)更改,组件就...

  • Flink--Checkpoint机制原理

    [TOC] 如何理解flink中state(状态) state泛指 state泛指:flink中有状态函数和运算符...

  • 人生三态

    父母自我状态(Parent ego state) 成人自我状态(Adult ego state) 儿童自我状态(C...

  • State状态模式

    状态模式的核心是将状态抽象为类,然后将状态的改变包含在类中,这样就避免了在client中写出大量的if...els...

  • 状态模式(State)

    结构 模式的组成环境类(Context): 定义客户感兴趣的接口。维护一个ConcreteState子类的实例,...

  • React State(状态)

    React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI...

网友评论

      本文标题:State(状态)

      本文链接:https://www.haomeiwen.com/subject/pylqvttx.html