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