react native專案基礎功能搭建簡介
hello,大家好,終於終於騰出了一點時間來更新了,我是個小忙人吖,哈哈
今天呢,給大家簡單的講一下RN專案的基礎功能的搭建,主要包括最常用的元件庫的介紹啊,底部選單欄的設定以及顯示隱藏啊,頭部的樣式處理啊還有列表的上拉重新整理下拉載入等等,都是最常用的功能,但是可是最實用的哦。
ok,第一步,首先你要按照RN官網先把環境變數呀,模擬器呀,開發工具都安裝好,這裡我就不囉嗦這些了,如果沒有配置的童鞋呢,點選:https://reactnative.cn/ 一步一步來吧
step 2,就是初始化專案了,也是按照官網執行命令:react-native init 專案名稱 然後用開發工具開啟這個專案,執行 ract-native run-android/run-ios
跑起來之後呢,就是開始規劃咱們的頁面了,我先貼一個我的專案截圖:

首頁
這是我的專案目錄結構:

目錄結構
大家可以看到,就是很標準的APP,然後我就照著這個簡單的介紹了蛤。
首先修改入口檔案:index.js

入口檔案
然後是路由檔案了,我使用的是元件:react-navigation,具體看圖:

引入三個頁面的入口檔案

引入的頁面

下面的tabBarPosition等等都是定義選單欄的樣式啊啥的
我比較懶,直接貼的圖,原諒我蛤,嘻嘻,其實大家看圖也更清晰
然後給大家看一下那三個入口檔案的頁面資訊:

好,順著這個,就來看一下classifyHome.js這個頁面吧:

這個頁面就是詳細的內容了,這裡就不介紹了,因為大家的頁面內容都不一樣,所以說了都是廢話。。。
最後說一下列表的下拉和上拉吧,這裡我使用的是FlatList,瞧程式碼蛤:


showFoot這個是根據請求的後臺資料控制,因為沒改公司的介面資料返回形式也不一樣,我不囉嗦這塊兒了
好了,最後說一下我經常用的元件庫吧,大概有:antd-mobile,antd-mobile-rn,native-base,react-native-storage,react-native-baidu-map,react-navigation,react-native-wechat,等下次我再囉嗦這裡面元件的使用方法吧,對,還有支付寶啊,微信支付啊、百度地圖等等,找時間來囉嗦囉嗦
唔,基本上就這麼多了,我先溜了溜了,有問題,大夥兒留言批評蛤