React-Native 导航栏切换

原本在项目中封装了一个导航栏，其实公用就可以了，由于项目需求，导航栏在多个页面的布局都不相同，重新封装了一个导航栏组建，代码不多，有需要的可以看看

在需要的页面引入这个js并引入

varScrollableTabView=require('react-native-scrollable-tab-view');

使用方式：

style={{paddingLeft:10,paddingRight:10,marginTop:-5}}

renderTabBar={()=>

tabNames={tabTitles}

tabIconNames={tabIcon}

/>}

>

代码（新建一个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

}

lettotallen=commonStyle.screenWidth;//获取屏幕的宽度

if(length){

totallen=(totallen/5)*length;//控制显示的数量

}

consttranslateX=this.props.scrollValue.interpolate({

inputRange:[0,1],

outputRange:[0,totallen/length],

});

return(

height:80,

flexDirection:'row',

marginTop:5,

marginLeft:10,

}}>

ref={(scrollView)=>{this._scrollView=scrollView; }}

showsVerticalScrollIndicator={false}

directionalLockEnabled={true}

bounces={false}

scrollsToTop={false}showsHorizontalScrollIndicator={false}horizontal={true}>

width:totallen,

flexDirection:'row',

alignItems:'center',

height:80,

}}>

{this.props.channel.map((cate,i)=>{

letcolor='#333';

// console.log((cate))

return(

key={i}

activeOpacity={0.8}

style={styles.tab}

onPress={()=>this.props.goToPage(i)}>

resizeMode={'cover'}

style={styles.icon}

source={{uri:cate.image?cate.image:cate.avatar_middle}}/>

{cate.title?cate.title:cate.weiba_name}

)

})}

style={[

{width:26,height:4,

borderRadius:2,marginLeft:(totallen/(length*2))-(20/1.5)},

{

transform:[

{translateX},

]

},

]}

/>

);

}

}

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

}

});