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

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

      

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

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

<ScrollableTabView
      initialPage={0}
      scrollWithoutAnimation={true}
      renderTabBar={()=><ScrollableTabBar
                    underlineColor='#ce3d3a'
                    activeTextColor='#fff'
                    inactiveTextColor='rgba(255, 255, 255, 0.7)'
                    underlineHeight={0}
                    textStyle={{ fontSize: 15 }}
                    tabStyle={{ paddingBottom: 0 }}
                    backgroundColor='#ce3d3a'
                    tabStyle={{paddingLeft:12,paddingRight:12}}
                   />}
      >
     <View tabLabel='推荐' style={styles.itemLayout}><Text >推荐板块</Text></View>
     <View tabLabel='头条号'  style={styles.itemLayout}><Text>头条号板块</Text></View>
     <View tabLabel='热点' style={styles.itemLayout}><Text >热点板块</Text></View>
     <View tabLabel='视频'  style={styles.itemLayout}><Text >视频板块</Text></View>
     <View tabLabel='上海'  style={styles.itemLayout}><Text >上海板块</Text></View>
     <View tabLabel='社会'  style={styles.itemLayout}><Text >社会板块</Text></View>
     <View tabLabel='图片'  style={styles.itemLayout}><Text >图片板块</Text></View>
     <View tabLabel='娱乐'  style={styles.itemLayout}><Text >娱乐板块</Text></View>
     <View tabLabel='科技'  style={styles.itemLayout}><Text >科技板块</Text></View>
     <View tabLabel='汽车'  style={styles.itemLayout}><Text >汽车板块</Text></View>
     </ScrollableTabView>

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

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

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

render(){
     return(
       <View style={[styles.titleBar,this.props.style]}>
        <TouchableOpacity style={{flex:1}} onPress={()=>alert('add')}>
        <Image resizeMode='contain' style={styles.search} source={require('../images/add_channel_titlbar.png')}/>
        </TouchableOpacity>
        <TouchableOpacity style={{flex:1}} onPress={()=>alert('search')}>
        <Image style={[styles.search,{width:30,height:30,}]} source={require('../images/white_search_titlebar.png')}/>
        </TouchableOpacity>
       </View>
     );
   }

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

return  <View
      style={[styles.container, {backgroundColor: this.props.backgroundColor, }, this.props.style]}
      onLayout={this.onContainerLayout}
    >
      <ScrollView
        ref={(scrollView) => { this._scrollView = scrollView; }}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        directionalLockEnabled={true}
        bounces={false}
      >
        <View
          style={[styles.tabs, {width: this.state._containerWidth, }, this.props.tabsContainerStyle]}
          ref={'tabContainer'}
          onLayout={this.onTabContainerLayout}
        >
          {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
          <Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, ]} />
        </View>
      </ScrollView>
     <TitleButton style={{height:49,position:'absolute',top:0,right:0}}/>
    </View>;

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

效果图：

         

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

   源码链接

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