tab 導航和三列的列表 · React Native 開發抖音 APP

[toc] # 需要使用到的組件 ![](https://img.kancloud.cn/1c/9a/1c9a84a23e6447be07af78d1d986b8ff_1228x878.png) # 三列左右滑動 ## 基本功能需要使用 `ViewPager` 組件實現。 ![](https://img.kancloud.cn/a8/8f/a88f7193c7f6031ac21442cc62e2e4e1_1746x1492.png) ## 放三個按鈕 ![](https://img.kancloud.cn/84/52/8452662afb29eae9b04e778390e067b5_1884x620.png) 三個按鈕樣式： ![](https://img.kancloud.cn/df/9c/df9c611b519dd094b530f3dae45ad731_536x356.png) ## 點擊三個按鈕時滑動框 ![](https://img.kancloud.cn/3b/27/3b27fc4335f1bfb4cbceff16a8c8c0ad_1820x1584.png) ## 選中按鈕的樣式 1. 先定義一個選中時的樣式 ![](https://img.kancloud.cn/32/5d/325dc5e2b24b1997d68f2b9a37a453b8_1028x478.png) 2. 定義一個變量，通過這個變量保存當前被選中的框的下標 ![](https://img.kancloud.cn/61/83/6183cf23af5b8123ba1c62f739e30e58_1506x1514.png) 3. 根據這個變量來判斷在哪個按鈕上添加選中的樣式 ![](https://img.kancloud.cn/ad/ed/aded1c99f8c718b734ccf59a3e39d2bf_1374x1182.png) ## 滑動框時同步更新按鈕狀態當滑動切換時，按鈕也應該同步切換。 ![](https://img.kancloud.cn/a4/cd/a4cdad1a1db45af3004aaa30abe14f72_1018x642.png) ## 黃線跟著滑動 ### 畫一個黃線 ![](https://img.kancloud.cn/2b/a4/2ba4df163cf75193387da2873b4aa11e_1896x566.png) ### 制作動畫動畫原理修改 left 的值，這個值有三種情況： left: '0%' ：最左邊 left: '33.333333%' ：中間 left: '66.666666%' : 右邊 1. 定義一個變量，用來黃線的位置 ![](https://img.kancloud.cn/e9/25/e925fb51eb0f9a68ba4acbeec57d4875_1538x696.png) 2. 把這個變量綁定到組件的 left 上 ![](https://img.kancloud.cn/aa/4a/aa4a8995a562b3c0d5ff677b6141c62e_1058x688.png) 3. 每當當前選中的下標發生改變時執行動畫，所以需要添加一個類似監聽器的功能監聽當前下標，當下標改變時，就滾動到這個下標 ![](https://img.kancloud.cn/23/48/23483d2f4befbae0e4e439d1cc7a11c4_1600x964.png) # 使用 FlatList 實現三列的列表 ![](https://img.kancloud.cn/04/4c/044c087f4e522b83f5a53648ba89a149_1610x964.png)