React Native之仿今日头条首页

      今日头条应用想必大家应该都不陌生,绝对称得上今日之星。媒体上面已经所向披靡,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.欢迎大伙加入.








    

发布了66 篇原创文章 · 获赞 8 · 访问量 65万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览