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.效果

轉自http://www.cnblogs.com/zhangdw/p/6159249.html