原本在项目中封装了一个导航栏，其实公用就可以了，由于项目需求，导航栏在多个页面的布局都不相同，重新封装了一个导航栏组建，代码不多，有需要的可以看看
在需要的页面引入这个js并引入
varScrollableTabView=require('react-native-scrollable-tab-view');
使用方式：
<ScrollableTabView
style={{paddingLeft:10,paddingRight:10,marginTop:-5}}
renderTabBar={()=>
<TabTopNoIcon
tabNames={tabTitles}
tabIconNames={tabIcon}
/>}
>
<SdLw{...this.props}tabLabel="1"/>
<ScLw{...this.props}tabLabel="2"/>
<LwSc{...this.props}tabLabel="3"/>
</ScrollableTabView>
代码（新建一个js随意引入代码）
/**
* Created by yanghong.liu on 2018/6/16.
*/
importReact, {Component}from'react';
import{
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,ScrollView,
Image,
View,Animated
}from'react-native';
import{commonStyle}from'../../utils/commonStyle';
import*asnavutilfrom'../../utils/navutil';
exportdefaultclassTabTopextendsComponent{
componentDidMount() {
this.props.scrollValue.addListener(this.updatePosition.bind(this));
}
updatePosition(){
if(this.props.tabs.length<=5){
return;
}
if(this.props.activeTab==this.lastaActiveTab||this.props.activeTab==0){
return;
}
this.lastaActiveTab=this.props.activeTab;
try{
letx=(this.props.activeTab-1)*(commonStyle.screenWidth/5)
if(x>((commonStyle.screenWidth/5)*(this.props.tabs.length-5))){
return
}
this._scrollView.scrollTo({x:x,y:0,animated:true})
}catch(e){}
}
render(){
letlength=this.props.tabs.length;
if(length==0){
return<View></View>
}
lettotallen=commonStyle.screenWidth;//获取屏幕的宽度
if(length){
totallen=(totallen/5)*length;//控制显示的数量
}
consttranslateX=this.props.scrollValue.interpolate({
inputRange:[0,1],
outputRange:[0,totallen/length],
});
return(
<Viewstyle={{
height:80,
flexDirection:'row',
marginTop:5,
marginLeft:10,
}}>
<ScrollView
ref={(scrollView)=>{this._scrollView=scrollView; }}
showsVerticalScrollIndicator={false}
directionalLockEnabled={true}
bounces={false}
scrollsToTop={false}showsHorizontalScrollIndicator={false}horizontal={true}>
<Viewstyle={{height:80,justifyContent:'center'}}>
<Viewstyle={{
width:totallen,
flexDirection:'row',
alignItems:'center',
height:80,
}}>
{this.props.channel.map((cate,i)=>{
letcolor='#333';
// console.log((cate))
return(
<TouchableOpacity
key={i}
activeOpacity={0.8}
style={styles.tab}
onPress={()=>this.props.goToPage(i)}>
<Viewstyle={styles.tabItem}>
<Image
resizeMode={'cover'}
style={styles.icon}
source={{uri:cate.image?cate.image:cate.avatar_middle}}/>
<Textstyle={{color:this.props.activeTab==i?'red':color,fontSize:this.props.activeTab==i?13:13}}>
{cate.title?cate.title:cate.weiba_name}
</Text>
</View>
</TouchableOpacity>
)
})}
</View>
<Animated.View
style={[
{width:26,height:4,
borderRadius:2,marginLeft:(totallen/(length*2))-(20/1.5)},
{
transform:[
{translateX},
]
},
]}
/>
</View>
</ScrollView>
</View>
);
}
}
conststyles=StyleSheet.create({
container:{
flex:1,
backgroundColor:'#ffffff',
marginTop:10
},
tabs:{
flexDirection:'row',
height:30,
},
tab:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
tabItem:{
flexDirection:'column',
alignItems:'center',
justifyContent:'space-around'
},
icon:{
width:60,
height:60,
marginBottom:2,
borderRadius:6
}
});
