RN組件應用·代碼案例(帶運行效果圖,倉庫不定期推)

一、前言

        其實寫博客很枯燥,碼字又太累,搞出來一大堆圖文跟流水賬一樣,也不會有多少人看。索性以後風格直接改爲走github,這樣比較直接,有代碼、有效果運行圖,而且想什麼時候寫、什麼時候推送,就很隨心所欲,只需博客上放個鏈接即可。

        言歸正傳,往下看!

         


 

二、Git倉庫地址

 

GitHub:https://github.com/kobeyk/react-native-example.git

clone到本地,執行:

git clone https://github.com/kobeyk/react-native-example.git

 

 


 

三、運行效果圖

 

說明:凡是圖片,都來源於網絡,凡是不涉及網絡請求的,數據構建走的都是項目中的靜態json數據,如:

 

 


 

(1)Image結合View和Text組件,來一波Nike球鞋展示(九宮格佈局)

 

 

 


 

(2)FlatList結合View、Text、Image、Swiper等組件,走一波技術書籍的"售賣"

 

 

 


 

(3)SectionList結合View、Text、Image、Swiper等組件,走一波NBA球隊球員的分組列表展示

 

 


 

(4)ScrollView結合Image、Text,加上RN自帶的fetch組件,實現網絡數據的get請求獲取相應的數據並展示

 

備註:macOS系統中,在ios模擬器上調出調試模式,快捷鍵:command+D

 

 

API接口地址:http://demo.itlike.com/web/xlmc/api/homeApi

 

 

項目demo實現(部分截圖):

 

 

 

 

 


 

(5)其他組件及第三方庫的使用,如網絡請求axios等,請關注我的github!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章