React-Native 动态属性state
来源:互联网 发布:linux安装输入法 编辑:程序博客网 时间:2024/05/27 08:13
如果是需要涉及到动态变化,就需要使用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 }; }
阅读全文
0 0
- React-Native 动态属性state
- React Native 之 State
- react-native的state
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- React State属性
- React Native State和Props
- [React-Native]Props和State
- React Native 初始化state 状态机
- React Native 之State状态
- React Native从零开始(三)Props(属性)和State(状态)
- React Native探索(三)组件的Props(属性)和State(状态)
- React Native入门(三)之Props(属性)和State(状态)
- react-native css属性
- React Native 属性使用
- react native 学习笔记之state
- React native学习第二章:State
- React native (4)--props、state、style、布局
- React native props state 初步学习-day1
- **.exe:it could not find or load the Qt platform plugin "windows"
- I-DEAS 10.0 最新设计指南简体中文.rar
- AndroidManifest.xml清单文件详解--data节点
- java 自我知识总结(五)双重循环制作图形
- android+事件分发机制
- React-Native 动态属性state
- Android程序安装后图标不显示
- ionic 实现自动升级APP
- SELinux app权限配置
- 关于闭包的面试题
- Qt Quick实现九宫格划指锁屏视图
- 微信支付提示支付失败,但所有流水状态是成功的
- 【第四届蓝桥杯】公约数公倍数
- IntelliJ IDEA 2017.1汉化破解版安装图文教程(附汉化补丁)