第一次react native專案實踐要點總結

2021-09-11 09:17:39 字數 2624 閱讀 2444

今天完成了我的第乙個react-native專案的封包,當然其間各種環境各種坑,同時,成就感也是滿滿的。這裡總結一下使用react-native的一些入門級重要點(不涉及環境)。注意:閱讀需要語法基礎: es6 、react 、jsx

我對react-native的理解簡而言之就是 :react的語法native的元件

constructor(props) ;

} render

() }

複製**

上面**定義了乙個「類」,可以看到裡面有乙個constructor方法,這就是構造方法,而this關鍵字則代表例項物件。當你在其他的元件中呼叫這個元件時,就會例項化這個「類」(即元件)。

注意:元件名需要大寫

在es6中,新增了import和export倆個關鍵字來匯入匯出模組。react-native的元件也是採用的這倆個關鍵字。

倆種方式:

第一種:

匯出:

render

() }

匯入:複製**

第二種:

匯出:

render

() }

匯入:複製**

字尾名自動獲取(檔案會獲取擁有與之相應字尾名的檔案)

在元件模組的匯入過程中,如果這個模組是分裝置的,也就有倆個檔案:***.android.js和***.ios.js,這些字尾(android和ios)是不需要的,在不同的裝置環境中,它自動獲取相應字尾名的檔案,即ios包會自動獲取***.ios,android包會自動獲取***.android。

字尾名自動忽略(檔案會自動忽略擁有與之不相應字尾名的檔案)

乙個ios和android的公共模組檔案,即共用**模組檔案,命名不能加ios和android字尾,否則,ios包取不到有androis字尾的檔案,android取不到有ios字尾的檔案。

例項解釋上述: 現在有以下五個檔案:

index.ios.js

index.android.js

say.android.js

say.ios.js

我們想要分別在index.ios.js 和 index.android.js引入其他三個模組。我們只要在index.ios.js 和 index.android.js檔案中如下寫法就行:

//這裡,index.ios.js會自動獲取say.ios.js的模組;index.android.js會自動獲取say.android.js的模組

import 模組名 from "./say";

複製**

專案中使用元件的時候,糾結於componentwillmount,componentdidmount...,直到看到這張圖豁然開朗(so,圖是盜的)。需要注意的是,這張圖應該比較老了,其中的getdefaultprops和 getinitialstate這倆個函式是es5的寫法了,es6語法中,constructor方法中代替了getdefaultprops/getinitialstate,我們可以在其內直接初始化props和state。

生命週期:

例項化(初始化)

存在期:(這個時候的主要行為是狀態的改變導致元件更新)

銷毀期:

props(屬性)

state(狀態)

state需要在constructor中初始化,然後通過呼叫setstate方法修改。通過上面的元件生命週期圖,我們可以看出,state是乙個狀態機,state的改變會引起shouldcomponentupdate、componentwillupdate、rendner...一系列方法的執行,檢視會重新渲染。所以,如果需要動態地改變元件的資料或試圖,請操作state。

子元件接收父元件的改變訊號

簡單:當父元件改變時,直接向子元件傳遞props

父元件接收子元件的改變訊號 在父元件中定義乙個方法,並通過props傳遞給子元件,子元件改變時,通過呼叫這個父元件傳遞過來的方法,從而實現在父元件中執行該方法。

非父子關係元件之間的通訊

rctdeviceeventemitter模組:它有倆個方法:emit和addlistener,乙個傳送,乙個接收。

rctdeviceeventemitter.emit(notifname,param);

rctdeviceeventemitter.addlistener(notifname,callback)

在專案中,遇到乙個控制scrollview元件滾動的需求,需要獲取當前滾動的座標,當時找了好久的文件,沒找到解決方案,後來發現可以通過這樣來傳入乙個事件物件

'scrollview' onscroll = }>

複製**

然後在函式中讀取:

scrollhshow(e) 

複製**

噹噹噹噹,我要的滾動檢視的座標值就在裡面了。

更多學習react native必看的幾個開源專案

手把手教你react native 實戰之開山篇《一》

react-native技術的優劣

第一次飛行

開始敲下這段話時,窗外下面正是一片片陽光照耀著的白雲,伴隨著張學友的歌聲,心潮起伏.雖然從初中起,我就經常乙個人坐著火車,汽車東奔西跑,坐飛機卻是第一次.早上上飛機前,心裡忐忑,必竟還是踏在陸地上踏實.但上了飛機後注意力就放在其它地方上去了,而且,運氣好的是我有乙個靠窗的位置.飛機準備起飛了,助跑加...

第一次面試

話說3月4號學院召開實習動員大會並有三家公司過來進行宣講會,分別是國家體育總局亞運專案組,金蝶和華際友天,由此開始了實習生涯。周五的傍晚,正吃著飯的時候突然收到簡訊通知,金蝶週六上午10點有個面試。當晚就瀏覽著些簡歷製作相關的網頁,為第二天做準備,總以為,簡歷弄得可以了,然後每太留意去完善 後來才知...

第一次哭泣

第一次來到南方 沒有朋友 沒有親人 乙個從沒有出過門的乙個女孩子 為了工作 學習c 在這碰到了乙個很好的老師 當老師控制我的機器時 或者給我講題時 我都是很感動的 幾乎是每天都有問題 形成了依賴 以前他說不要一有問題就舉手問 我依然問 就算我不問他也會控制我的機器 看看我在做什麼 或者有什麼錯誤 現...