State(状态)

/**
 * 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毫秒改变隐藏或显示状态)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的...
    SYOL阅读 669评论 0 0
  • 今天遇到一个诡异的情况,有一个表单验证的问题,使用了 ref 获取 input 的引用: 然后在 componen...
    文艺的小唐阅读 4,334评论 0 3
  • 我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的...
    村雨灬龑阅读 726评论 0 1
  • 记得我妈每次给我打电话,总会带上一句,“你已经22了,不是12岁啊,在我眼里你是个孩子,可是在外人眼里,你已经成年...
    念旧君阅读 218评论 0 1
  • 三:打了个利落的败仗 再见陈选,已经是开了学,还是那么流里流气,天天腻歪着宁宇,两三天不给好脸色看,他就摆出个小媳...
    ang_ing_阅读 201评论 0 0