博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React-Native 学习第三天:State 制作闪烁文字
阅读量:5838 次
发布时间:2019-06-18

本文共 571 字,大约阅读时间需要 1 分钟。

一、简介

我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。

二、例子:闪烁文字

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了,所以文字内容应该是一个prop。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到state中。

新建一个文件夹用于存放本节的demo,使用如下命令创建新的项目。

react-native init TestRN_State --version 0.44.3

cd TestRN_State
react-native run-ios

运行起来新建的demo,就是RN默认的欢迎页面。

我们进入新建的项目的文件夹,找到

img_e95fe4fdcc3a518037aadf760c9bf5c3.png
image.png

文件,打开。

找到 export default class TestRN_State extends Component

把里面的内容删掉,我们要写入自己的内容。
我们先写控制文字闪烁状态的代码,闪烁状态作为一个组件存在,我们取名为Blink。

img_5b09205e5d9b9aa2f1c9be203a3fc52a.png
image.png

然后是文本部分,写在默认的组件中。

img_9ce9be5a00bf5a073e302b9beb89bc60.png
image.png

然后刷新模拟器,就可以看到闪烁的文字了。

转载地址:http://vyncx.baihongyu.com/

你可能感兴趣的文章
java中的Volatile关键字
查看>>
前端自定义图标
查看>>
实验二
查看>>
独立开发一个云(PaaS)的核心要素, Go, Go, Go!!!
查看>>
MyBatis使用DEMO及cache的使用心得
查看>>
网站文章如何能自动判定是抄袭?一种算法和实践架构剖析
查看>>
【OpenCV学习】滚动条
查看>>
ofo用科技引领行业进入4.0时代 用户粘性连续8个月远甩摩拜
查看>>
兰州青年志愿者“中西合璧”玩快闪 温暖旅客回家路
查看>>
计划10年建10万廉价屋 新西兰政府:比想象中难
查看>>
甘肃发首版《3D打印职业教育教材》:校企合作育专才
查看>>
为找好心人抚养孩子 浙江一离婚父亲将幼童丢弃公园
查看>>
晚婚晚育 近20年巴西35岁以上孕妇增加65%
查看>>
读书:为了那个美妙的咔哒声
查看>>
jsp改造之sitemesh注意事项
查看>>
iOS 9.0之后NSString encode方法替换
查看>>
ASMFD (ASM Filter Driver) Support on OS Platforms (Certification Matrix). (文档 ID 2034681.1)
查看>>
CRM Transaction处理中的权限控制
查看>>
[转]linux创建链接文件的两种方法
查看>>
python ipaddress模块使用
查看>>