天天看點

React-Native 學習第三天:State 制作閃爍文字

一、簡介

我們使用兩種資料來控制一個元件: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預設的歡迎頁面。

我們進入建立的項目的檔案夾,找到

React-Native 學習第三天:State 制作閃爍文字

image.png

檔案,打開。

找到 export default class TestRN_State extends Component

把裡面的内容删掉,我們要寫入自己的内容。

我們先寫控制文字閃爍狀态的代碼,閃爍狀态作為一個元件存在,我們取名為Blink。

React-Native 學習第三天:State 制作閃爍文字

然後是文本部分,寫在預設的元件中。

React-Native 學習第三天:State 制作閃爍文字

然後重新整理模拟器,就可以看到閃爍的文字了。