react-native-tab-navigator
网址:
https://github.com/happypancake/react-native-tab-navigator
自己的列子
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import PopularPage from "./PopularPage"
export default class HomePage extends Component{
constructor(props){
super(props)
this.state={
selectedTab:'popular'
}
}
render() {
return (
<View style={styles.container}>
<TabNavigator
>
<TabNavigator.Item
selected={this.state.selectedTab=='popular'}
title="最热"
badgeText="1"
renderBadge={()=><View style={styles.badgeView}><Text style={styles.badgeText}>10</Text></View>}
selectedTitleStyle={{color :'#63B8FF'}}
renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_popular.png')}/>}
renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}
onPress={() => this.setState({selectedTab: 'popular'})}
>
{/*选项卡对应的页面*/}
<PopularPage/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab=='trending'}
title="趋势"
selectedTitleStyle={{color :'#63B8FF'}}
renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_trending.png')}/>}
renderSelectedIcon={() =>
<Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}
onPress={() => this.setState({selectedTab: 'trending'})}
>
<View style={{backgroundColor:'#0F0',flex:1}}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'favorite'}
title="收藏"
selectedTitleStyle={{color: '#63B8FF'}}
renderIcon={() =>
<Image style={styles.icon} source={require('../../res/images/ic_favorite.png')}/>}
renderSelectedIcon={() =>
<Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}
onPress={() => this.setState({selectedTab: 'favorite'})}
>
<View style={{backgroundColor:'#0F0',flex:1}}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'my'}
title="我的"
selectedTitleStyle={{color: '#63B8FF'}}
renderIcon={() =>
<Image style={styles.icon} source={require('../../res/images/ic_my.png')}/>}
renderSelectedIcon={() =>
<Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
onPress={() => this.setState({selectedTab: 'my'})}
>
<View style={{backgroundColor:'#00F',flex:1}}></View>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
icon:{
width:24,
height:24
},
badgeView:{
width:22,
height:14 ,
backgroundColor:'#f85959',
borderWidth:1,
marginLeft:10,
marginTop:3,
borderColor:'#FFF',
alignItems:'center',
justifyContent:'center',
borderRadius:8,
},
badgeText:{
color:'#fff',
fontSize:8,
}
});
react-native-scrollable-tab-view
网址:https://github.com/skv-headless/react-native-scrollable-tab-view
npm install react-native-scrollable-tab-view --save 下载
<ScrollableTabView
tabBarBackgroundColor="#63B8FF"
tabBarActiveTextColor="#FFF"
tabBarInactiveTextColor="#F5FFFA"
tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
<Text tabLabel='IOS'/>
<Text tabLabel='Android'/>
<Text tabLabel='Java'/>
<Text tabLabel='JavaScript'/>
</ScrollableTabView>
tabLabel 这个属性是必须的而且要唯一值,其实就就是显示滚动的那个字
1513160004(1).jpg
网友评论