react native專案之樣式總結

react native（以下簡稱rn）裡面涉及到的樣式規則都是在js檔案中寫的，一改pc端的在樣式檔案中定義規則，所以pc端開發習慣的童鞋轉向開發rn專案時，可能會對樣式感到有些奇怪；其實react在地面實現時會轉化對應的樣式。

rn中的css樣式是css中的乙個子集，對css的一些規程進行了閹割，此外還擴充套件了一些css中沒有的規則，例如樣式中的resizemode規則屬性就是css沒有的。具體的rn樣式可以參考《react-native樣式指南》rn的布局是完全是用flex來實現。使用flex來進行布局是多麼讓人爽心悅目的一件事，按照設計圖來實現乙個頁面是很容易的事情，寫過pc端布局轉向寫rn的布局的童鞋，這種感覺更有強烈（個人yy的哈）；用flex解決pc端的垂直居中的問題真是小菜一碟啊；

flex的用法就不多說了，具體可參考阮一峰老師的這篇文章《flex布局：語法篇》，裡面對flex的講解非常詳細；

需要注意的是：rn中的flex的相關屬性不是完全依照w3c規範提供的各種值，對其中的某些屬性值進行了閹割，下面就借用《react-native樣式指南》中內容說明一下：

補充一點：

rn塊元素預設的flex布局為column布局；

一定要注意justifycontent和alignitems這個兩個屬性的區別，許多開發者很容易會產生誤導；

justifycontent是相對於主軸的對齊方式，而alignitems是相對於交叉軸的對齊方式。

那麼，這個主軸和交叉軸如何確定呢？初學者會認為水平方向就是主軸，垂直方向就是交叉軸；錯！主軸和交叉軸是相對於flexdireaction的值而言的，主軸和交叉軸是相對於flexdireaction的值而言的，主軸和交叉軸是相對於flexdireaction的值而言的。重要的事情說三遍。具體而言：

flexdireaction

主軸

交叉軸

row水平方向

垂直方向

column

垂直方向

水平方向

來看一段**：

1

get('
height
').height}}>
2水平居中
30, backgroundcolor:'
#333
',alignitems:'
center
'}}>4'
#fefefe
',width:30,height:30,borderradius:15}}/>56

首先樣式的命名規則全部採用駝峰寫法，不能使用其他寫法，這樣的要求估計也是按照js的寫法規則來走的；其次就是上面說的rn樣式是css樣式的乙個子集；下面列出了一些其他的差異：

例如在很多有電商公司，提供了供客戶查詢購物的物流追蹤的乙個進度資訊，例如下圖，這樣的乙個樣式如何用rn的樣式來完成的呢，下面就簡單介紹了個人的思路，可能有其他更好的實現，有的話大家可以積極的分享。

React Native專案實戰之fetch請求

摘要 fetch簡介 在 ajax 時代，進行請求 api 等網路請求都是通過xmlhttprequest 或者封裝後的框架進行網路請求。而在前端快速發展地過程中，為了契合更好的設計模式，產生了 fetch 框架。在 chrome 瀏覽器中已經全域性支援了 fetch 函式，開啟除錯工具，在 con...

React Native專案實戰之fetch請求

在 chrome 瀏覽器中已經全域性支援了 fetch 函式，開啟除錯工具，在 console 中可以進行體驗下fetch。先不考慮跨域請求的使用方法，我們先請求同域的資源。例如 fetch then function response 使用 fetch 的建構函式請求資料後，返回乙個 promis...

React Native 之 專案實戰 五

可以酌情 文中內容因各人理解不同，可能會有所偏差，歡迎朋友們聯絡我討論。本章許多內容本來是要放到後面講的，考慮到有朋友可能不需要了解redux 中當我們點選首頁和海淘2個item時，會馬上獲取最新資料個數然後進行更新，這邊來實現一下這個功能。通過通知的方式監聽item點選做相應的操作，所以我們在需要...