React Native學習總結第三天

2021-09-11 11:45:08 字數 2742 閱讀 5430

隨元件載入只執行一次的操作,放在willmount或者didmount中

記得在willunmount中銷毀定時器和一些訂閱事件

props發生變化,使用willreceiveprops來處理(比如將變動同步給state)

componentwillreceiveprops(nextprops))

}複製**

import react,  from 'react'

import from 'react-native'

//這裡寫乙個定時器元件 在es5中需要匯入第三方的定時器類

class countdown extends component ;

render

() = this.state;

return} }

//元件已經載入成功

componentdidmount

() = this.state;

if (count === 0)

this.setstate();

}, 1000);

} 元件即將銷毀 釋放記憶體

componentwillunmount

()

} render

() }

const styles = stylesheet.create(,

})複製**

import react,  from 'react'

import from 'react-native'

//編寫定時器元件

class countdown extends component

render

()=this.state;

return ()}

add = (time) =>)

} componentdidmount

() =this.state;

if (count == 0)

this.setstate()

},1000)

} componentwillunmount()}

//es6的函式寫法 addtime是方法名 ()引數名 =>{}執行的方法體

addtime = () =>

render

() 如何理解這句**:countdown是當前的元件類 q表示countdown元件類的例項 q是例項的名字a 可以理解oc的 person *p =[person new];

=> 表示作用於的意思 我們都知道要想介面能夠進行重新整理 只能對當前的屬性進行setstate操作 所以重新整理介面 只能對當前的屬性進行操作,屬性的變化

變化就會引起介面的變化 所以用this.a 對q的植進行接收

*/}this.a = q}/>)}}

const styles = stylesheet.create(,

welcome: ,

})複製**

import react,  from 'react'

import from 'react-native'

//編寫定時器元件

class countdown extends component

render

()=this.state;

return ()}

timeup =() =>

componentdidmount

() =this.state;

if (count == 0)

this.setstate()

},1000)

} componentwillunmount()}

timeupparent = (params) =>

render

() )}}

const styles = stylesheet.create(,

welcome: ,

})複製**

!(/users/jiangpeng/desktop/2018-01-19 13_52_54.gif)

import react,  from 'react'

import from 'react-native'

//編寫定時器元件

class countdown extends component

render

()=this.state;

return ()}

timeup =() =>

componentdidmount

() =this.state;

if (count == 0)

this.setstate()

},1000)

} componentwillunmount()}

timeupparent = (param1,param2) =>

state =

render

() />

this.timeupparent('父元件的引數' +i,child)表示呼叫函式

*/}return

this.timeupparent('父元件的引數' +i,child)}/>})}

)}}

const styles = stylesheet.create(,

welcome: ,

})複製**

ReactNative學習筆記(五)踩坑總結

原文見這裡 載入 如下 fetch then response response.json then json alert json catch error alert 錯誤 error debug模式下沒有任何問題,但是打成release包時卻報錯 改成這樣也一樣 fetch then respo...

react native學習資源

這是我覺得比較有用的學習資源 要多練習多理解 一 1.react native 官方api文件 2.react native中文文件 3.react native通訊機制詳解 4.react native布局篇 5.react native基礎指南 一 6.react native基礎指南 二 7....

React Native學習 起步

時間 2015 04 11 10 32 49 w3ctech 原文 主題react 本指南匯集react native各類學習資源,給大家提供便利。指南正在不斷的更新,大家有好的資源歡迎pull requests!同時還有awesome react native系列 研究原始碼也是乙個很好的學習方式...