React-Native 類淘寶選擇商品詳情控件

????????最近在寫個電商的項目,在寫選擇商品規(guī)格的時候,本來打算用網上其他人寫好的控件,但是發(fā)現(xiàn)都不能滿足需求,由于需要的是像淘寶一樣,選擇衣服尺碼的時候對應的顏色沒有庫存的不能選中,且價格和剩余庫存是不斷更改的。所以決定自己寫一個,之前在iOS原生端實現(xiàn)這個功能是用的別人的庫,根據這個庫,用RN語言實現(xiàn)該功能。

iOS原生實現(xiàn)連接


????????先說實現(xiàn)思路:由于一開始開發(fā)的時候后臺接口是我自己寫的,簡單的本地服務器,能夠取數據寫數據,定義尺碼、顏色、價格、數量等信息的時候不同的信息會寫成單獨的數據,如 圖1:


圖1

拿到數據之后開始處理,把所有數據都放進一個字典中,如 圖2:


圖2

把字典傳入控件中,選擇某一信息(如 L 碼)后,從字典中查詢,沒有的顏色顯示為灰色且按鈕不可點擊。大致的思路就是這樣,說的不是特別細,具體可以看代碼。

ZTShop-React-Native,該項目中包含了選擇商品規(guī)格、購物車、支付寶集成、瀑布流布局、城市選擇器等功能,iOS、Android都可以運行。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容