【React Natvie 實戰】商品分類

標籤：view   實現   方向   .com   點擊   記錄   span   str   選中   

1.前言

商品分類是各種app常見的一種操作，一般都是左右兩欄構成，左側邊欄是商品的分類，右側邊欄是商品的展示，同時左右兩欄都可以滑動。今天我們就用React Native來實現這種效果。

實現內容：1）分欄顯示

　　　　　2）左右兩欄都可以上下滑動，連網操作後可以上拉下拉重新整理，載入更多等一些操作。

　　　　　3）分類欄(左側邊欄)，選中後更改背景色；商品欄(右側邊欄) ，根據選中的分類，展示對應的商品。

2.屬性

Dimensions:

　Dimensions.get(‘window‘).height; 擷取當前螢幕的高度
　Dimensions.get(‘window‘).width; 擷取當前螢幕的寬度

PixelRatio：

　1/PixelRatio.get(); 擷取一個像素的點

justifyContent：flex-start | flex-end | center | space-between | space-around

• flex-start：彈性盒子項目將向行起始位置對齊。該行的第一個子項目的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。
• flex-end：彈性盒子項目將向行結束位置對齊。該行的第一個子項目的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒項目與其前一個項目對齊。
• center：彈性盒子項目將向行中間位置對齊。該行的子項目將相互對齊並在行中置中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢出）。
• space-between：彈性盒子項目會平均地分布在行裡。如果最左邊的剩餘空間是負數，或該行只有一個子項目，則該值等效於‘flex-start‘。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
• space-around：彈性盒子項目會平均地分布在行裡，兩端保留子項目與子項目之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於‘center‘。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

 align-items: flex-start | flex-end | center | baseline | stretch 

• flex-start：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子項目的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子項目在該行的側軸（縱軸）上置中放置。（如果該行的尺寸小於彈性盒子項目的尺寸，則會向兩個方向溢出相同的長度）。
• baseline：如彈性盒子項目的行內軸與側軸為同一條，則該值與‘flex-start‘等效。其它情況下，該值將參與基準對齊。
• stretch：如果指定側軸大小的屬性值為‘auto‘，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照‘min/max-width/height‘屬性的限制。

3.使用執行個體

 

 

注釋：

1、this.state.leftCategoryData: 存放的是左邊分類欄分類名稱，跟右側邊欄商品資料的索引對應。

2、this.state.selectCategoryIndex: 記錄選中的左邊左側邊欄，根據此值設定左邊分類欄選中的分類背景，選中是白色背景，未選中的是灰色背景。

3、this.state.rightData: 對應左邊分類下的商品，這些值都可以從伺服器擷取，格式三條資料存放在一個索引中，方便後續代碼使用。

4、categoryClick: 響應左邊分類欄的點擊事件。

5、leftRenderRow: 渲染左邊分類欄 。

6、rightRenderRowItem: 根據Index渲染右邊商品欄，三條資料作為一行來渲染。

7、rightRenderRow:渲染右邊商品欄。

8、樣式：左右兩欄，比例為2：7

9、滑動操作用ScrollView來實現

4.效果

【React Natvie 實戰】商品分類