RN入门基础3：JSX动态布局之自定义属性state

一、介绍

一个组件有两种属性控制：props（控制静态数据）和state（控制动态数据）。

props用于需要静态数据（它在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变）。

state用于需要改变的数据。

一般来在constructor中初始化state，然后在需要修改时调用setState方法。

二、举例

假如我们需要制作一段不停闪烁的文字。

分析：

1.文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。

2.而文字的显示或隐藏的状态则是随着时间变化的，因此这一状态应该写到state中。

代码：

1.自定义组件 Blink ，文字显示内容用props指定

<Blink text='I love to blink' />

2.自定义组件 Blink ，constructor中初始化state显示文字，在setInterval中每1000毫秒让state取反

class Blink extends  Component{constructor(props){super(props);this.state = {showtext:true};// 每1000毫秒对showText状态做一次取反操作setInterval( ()=> { this.setState({showtext:!this.state.showtext}); },500 );}render(){// 根据当前showText的值决定是否显示text内容let display = this.state.showtext?this.props.text:'';return(<Text>{display}</Text>)}
}

3.主入口

export default class myprojectname extends Component<Props>  {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>);}
}// 注意，这里用引号括起来的'myprojectname'必须和你init创建的项目名一致
AppRegistry.registerComponent('myprojectname', () => myprojectname);

4.效果

RN入门基础3：JSX动态布局之自定义属性state相关推荐

移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
RN入门基础1：第一个RN项目-hello World
1.新建工程,用webStorm创建一个react native项目首先打开package.json, 因为webstorm会创建rn项目时会下载最新的react-native,所以运行程序到模拟器 ...
CG插画入门教程之人体动态基础与面部画法分析
CG插画入门教程之人体动态基础与面部画法分析第一章:人体动态的画法分析与技巧讲解视频地址:https://www.qingwk.com/course/detail/10 章节1:人体动态的画法分析与技 ...
安卓APP_ Fragment（1）—— Fragment概念、基础用法、动态变换、管理栈
摘自:安卓APP_ Fragment(1)-- Fragment概念.基础用法.动态变换.管理栈作者:丶PURSUING 发布时间: 2021-04-15 23:32:31 网址:https://b ...
Android入门教程：ConstraintLayout约束布局
原文首发自掘金芦苇APP团队,转载到自己小号上再发一遍~ 翻译By Leelion6.关于 ConstraintLayout 的文章其实已经不少了,不过看到这篇文章写的很有趣,以及在翻译的过程中,感受 ...
HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
java SE（一）——入门基础
java入门基础一.java语言概述 1.java背景知识 2.为什么用java?(java的特性) 4.java能做什么? 4.java技术体系 5.总结二.java环境搭建 1jdk简介 2 ...
Python培训入门基础知识学什么?
Python培训基础知识主要是针对一些零基础的同学安排的,虽说Python是相对比较简单的一门编程语言,但是没有基础的同学还是要进行系统的学习,那么Python培训入门基础知识学什么呢?来看看下面小编 ...
JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...

RN入门基础3：JSX动态布局之自定义属性state

RN入门基础3：JSX动态布局之自定义属性state相关推荐

最新文章

热门文章