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