React Native之仿今日头条首页

      今日头条应用想必大家应该都不陌生，绝对称得上今日之星。媒体上面已经所向披靡，PK掉微信公众号是迟早的事情，我祝今日头条再创辉煌！

      首先我们先看下今日头条的首页：

      

      这里提到一个开源框架：react-native-scrollable-tab-view，类似于安卓中的ViewPagerIndicator+ViewPager等,下面我简单介绍下如何应用以及如何来拓展实现我们想要的效果.

      首先我们先把框架拉进来：npm install react-native-scrollable-tab-view --save 。虽说安卓现在用gradle来集成第三方框架方便的许多，但感觉还是react相对简单方便。然后我们就可以引用框架的相关元素。这里用到框架内部的ScrollableTabView，ScrollableTabBar两个组件.其实框架内部还有其他的组件：DefaultTabBar，FacebookTabBar等.

}
      >
     推荐板块
     头条号板块
     热点板块
     视频板块
     上海板块
     社会板块
     图片板块
     娱乐板块
     科技板块
     汽车板块
     

 至此，我们就简单了实现了整个框架，但是右上角的添加和搜索按钮如何加上去呢，这就使得我们不得不拓展第三方的框架，首先我们先了解下加入的框架内部结构：

我们要做的就是在ScrollableTabBar.js中的render方法相应的位置加入我们的自定义的按钮组件.

下面我们就自定义添加和搜索两个按钮的TitleButton组件.相对比较简单.

render(){
     return(
       
        alert('add')}>
        
        
        alert('search')}>
        
        
       
     );
   }

接下来我们打开第三方框架中ScrollableTabBar，将我们的TitleButton组件加入进去。注意布局是position，其实就达到覆盖在原有的组件上面。

return  
       { this._scrollView = scrollView; }}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        directionalLockEnabled={true}
        bounces={false}
      >
        
          {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
          
        
      
     
    ;

到这里我们就完成了整个模拟的过程.

效果图：

         

      Tips：在安卓手机上操作有卡顿现象，但在ios上面操作挺流畅的，不过整体来说还是不错的，希望Fackbook尽快完善React，使其的性能尽可能的流畅！！！

   源码链接

 RN开发群：527459711.欢迎大伙加入.