React Native 初體驗

Goyakod發表於2019-02-18

2015年9月底開始正式接觸React native,公司的ios團隊用它寫了一個安卓專案之後,到上週,公司徹底停止了RN的使用。

至於我們為什麼停止使用RN,原因大致有兩個:

一、RN對安卓的支援還不夠好,而我們又恰恰選擇嘗試用RN來搞安卓端。

二、公司眼前的專案較多,把所有專案全部停用原生改用RN也不太實際。

儘管公司目前暫時停止了RN這個技術棧,但是我個人不會停止對RN的關注。

React Native 中文網

      環境配置就不贅述了,關於RN的一些網站裡的文件已經相當詳細了。只是所有文件基本都告訴你安裝Watchman和Flow,實際只是推薦你安裝,所以不安裝完全不影響你的開發,而且在RN的更新版本中有的時候安裝了Watchman反而會導致一些不必要的麻煩。這裡提一下,要不要安裝自己取捨吧。

       熟悉了RN的開發流程之後,再回到原生,多少會有不適感,其主要原因是RN的元件化真的有很多優點,適應之後就覺得各種好用。另一個原因就是除錯效率高,基本晃一晃手機就能看到新程式碼的效果,這個是原生所不能的。

       元件化和Flex佈局是RN給我印象最深的,哦,還有狀態State。文件基本涵蓋了主流的移動端控制元件了,只是在RN不再叫控制元件而是元件。CSS樣式的佈局用Flex基本可以解決所有的需求了。至於狀態值改變,render重新渲染這個點,確實方便。

印象深刻的:

      RN Navigator教程

      Navigator的反向傳值,需要在設定initialRoute的時候同時用類似 ” … parameters ” 的方式傳參,下一級介面可以直接通過this.props.parameters拿到從上個頁面傳過來的值。至於反向傳值,也是通過parameters只是傳過去的是一個function,這點有點像ios裡的Block。如果返回之後需要重新渲染頁面的話那就得在function裡面使用setState()了,或者通過元件的生命週期在ComponentShouldUpdate裡面重新重新整理,當然這個方法還有bug,並不是每次都成功。

    上段提到的元件的生命週期,這篇部落格會幫到你:React Native中元件的生命週期   

     ES5和ES6寫法對照表

相關文章