react-native创建tabbar

在使用react-native的过程中，一般都会做一些tabbar。

在这里我比较常用的是 ： react-native-tab-navigator 这个第三方库

下面是效果图：

 我贴下核心代码

const dataSource = [

{icon:require('./image/icon_home_normal.png'),selectedIcon:require('./image/icon_home_selected.png'),tabPage:'Home',tabName:'首页',component:Home},

{icon:require('./image/icon_order_normal.png'),selectedIcon:require('./image/icon_order_selected.png'),tabPage:'Order',tabName:'订单',component:Order},

{icon:require('./image/icon_mine_normal.png'),selectedIcon:require('./image/icon_mine_selected.png'),tabPage:'Mine',tabName:'我的',component:Mine}

]

 

export default class App extends Component {

 

constructor(props){

super(props);

navigation = this.props.navigation;

this.state = {

selectedTab:'Home'

}

}

 

render() {

let tabbars = dataSource.map((item,i) => {

return (

<TabNavigator.Item

title={item.tabName}

selected={this.state.selectedTab===item.tabPage}

titleStyle={{color:'gray'}}

selectedTitleStyle={{color:'black'}}

renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}

renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}

tabStyle={{alignSelf:'center'}}

onPress = {() => {this.setState({selectedTab:item.tabPage})}}

key={i}

>

<item.component navigation={navigation}/>

</TabNavigator.Item>

);

});

return (

<View style={styles.container}>

<TabNavigator

hidesTabTouch={true}

>

{tabbars}

</TabNavigator>

</View>

);

}

}

然后在定义三个页面的JS就可以了