11-7 关于tab-view组件的优化

在这一章中，我们将对 react-native-tab-view 的性能进行优化，并解决频道页面的小 bug。以下是具体步骤：

一、性能优化

1. 安装依赖

   yarn add react-native-tab-view-viewpager-adapter @react-native-community/viewpager
   

2. 安装 CocoaPods 依赖

   cd ios && pod install && cd ..
   

3. 更新 HomeTabs 组件 在 navigator/HomeTabs.tsx 中，使用 ViewPagerAdapter 替换默认的分页器：

   import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter';
   
   function HomeTabs({ myCategorys }: IProps) {
     return (
       <Tab.Navigator
         tabBar={(props) => <TopTabBarWrapper {...props} />}
         pager={(props) => <ViewPagerAdapter {...props} />}
       >
         {/* 路由 */}
       </Tab.Navigator>
     );
   }
   

二、解决频道页面的小 bug

在 Tab 组件的 renderTabBar 中包裹一个拖动响应组件：

renderTabBar = (props: SceneRendererProps) => (
  <TapGestureHandler>
    <TabBar
      {...props}
      style={styles.tabbar}
      indicatorStyle={styles.indicator}
    />
  </TapGestureHandler>
);

三、添加下拉刷新功能

1. 在频道页面的最外层包裹 RefreshControl

   修改 Album 页面的 render 方法：

   render() {
     return (
       <View style={styles.container}>
         <RefreshControl
           refreshing={this.state.refreshing}
           onRefresh={this.onRefresh}
         />
         {this.renderHeader()}
         <Tab />
       </View>
     );
   }
   

2. 实现下拉刷新方法

   onRefresh = () => {
     // 重置滚动偏移值
     this.translateYOffset.setValue(0);
     this.translateY.setValue(0);
     this.lastTranslationYValue = 0;
     // 刷新数据
     // 在这里调用刷新数据的逻辑
   };
   

四、课后作业解答

1. 解决频道页面的小 bug 通过在 Tab 组件的 renderTabBar 中包裹一个拖动响应组件，并在状态改变回调中重置 _lastScrollY 的值，可以解决频道页面的小 bug。
2. 添加下拉刷新功能 通过在频道页面的最外层包裹 RefreshControl，可以实现下拉刷新功能。

这一节的内容就到这里了。下一章，我们将学习如何实现音频播放和弹幕功能。