react-native tab标签

现在，我们的app中一般都要有底部导航栏的存在，但react-native并没有给我们提供原生的实现，github上有大神实现了相关模块(https://github.com/expo/react-native-tab-navigator),使用起来非常方便。
首先，我们要切换到我们的工程目录下面:

运行 npm install react-native-tab-navigator –save
下载成功后会有下面的提示：

此时我们打开我们项目的package.json文件，在dependencies下面就会有我们刚刚下载的 react-native-tab-navigator 模块。

至此，我们已经成功将react-native-tab-navigator 添加到了我们的项目中。
代码中，首先我们要从 react-native-tab-navigator 引入TabNavigator：

import TabNavigator from 'react-native-tab-navigator'；

然后我们就可以使用TabNavigator：

<TabNavigator tabBarStyle={{backgroundColor:'#f8f8f8'}} style={{backgroundColor: '#f8f8f8'}}>
                    <TabNavigator.Item
                        title="首页"
                        selected={this.state.selectedTab==='home'}
                        titleStyle={{color:'#6d797e'}}
                        selectedTitleStle={{color:'#00a9f2'}}
                        renderIcon={()=><Image source={require('./res/home_default.png')} style={styles.tabIcon}/>}
                        renderSelectedIcon={()=><Image source={require('./res/home_selected.png')}style={styles.tabIcon}/>}
                        onPress={()=>this.setState({selectedTab:'home'})}
                    >
                    <HomeScene
                    navigator={this.props.navigator}
                    route={this.props.route}
                    />
                    TabNavigator.Item>
                    <TabNavigator.Item
                        title="消息"
                        selected={this.state.selectedTab==='message'}
                        titleStyle={{color:'#6d797e'}}
                        selectedTitleStle={{color:'#00a9f2'}}
                        renderIcon={()=><Image source={require('./res/message_default.png')} style={styles.tabIcon}/>}
                        renderSelectedIcon={()=><Image source={require('./res/message_selected.png')} style={styles.tabIcon}/>}
                        onPress={()=>this.setState({selectedTab:'message'})}
                    >
                        <MessageScene
                            navigator={this.props.navigator}
                            route={this.props.route}
                        />
                    TabNavigator.Item>
                    <TabNavigator.Item
                        title="通讯录"
                        selected={this.state.selectedTab==='contact'}
                        titleStyle={{color:'#6d797e'}}
                        selectedTitleStle={{color:'#00a9f2'}}
                        renderIcon={()=><Image source={require('./res/contact_default.png')} style={styles.tabIcon}/>}
                        renderSelectedIcon={()=><Image source={require('./res/contact_selected.png')} style={styles.tabIcon}/>}
                        onPress={()=>this.setState({selectedTab:'contact'})}
                    >
                        <ContactScene
                            navigator={this.props.navigator}
                            route={this.props.route}
                        />
                    TabNavigator.Item>
                    <TabNavigator.Item
                        title="发现"
                        selected={this.state.selectedTab==='find'}
                        titleStyle={{color:'#6d797e'}}
                        selectedTitleStle={{color:'#00a9f2'}}
                        renderIcon={()=><Image source={require('./res/find_default.png')} style={styles.tabIcon}/>}
                        renderSelectedIcon={()=><Image source={require('./res/find_selected.png')} style={styles.tabIcon}/>}
                        onPress={()=>this.setState({selectedTab:'find'})}
                    >
                        <FindScene
                            navigator={this.props.navigator}
                            route={this.props.route}
                        />
                    TabNavigator.Item>
                    <TabNavigator.Item
                        title="我的"
                        selected={this.state.selectedTab==='mine'}
                        titleStyle={{color:'#6d797e'}}
                        selectedTitleStle={{color:'#00a9f2'}}
                        renderIcon={()=><Image source={require('./res/mine_default.png')} style={styles.tabIcon}/>}
                        renderSelectedIcon={()=><Image source={require('./res/mine_selected.png')} style={styles.tabIcon}/>}
                        onPress={()=>this.setState({selectedTab:'mine'})}
                    >
                        <MineScene
                            navigator={this.props.navigator}
                            route={this.props.route}
                        />
                    TabNavigator.Item>
                TabNavigator>

• TabNavigator.Item 代表一个tab标签，中间组件是当前标签对应的页面。
• tabBarStyle 标签栏的样式
• title　tab标签的标题
• selected 布尔值判断当前标签是否选中
• titleStyle 标题未选中时的样式
• selectedTitleStle 标题选中时的样式
• renderIcon 未选中时的icon
• renderSelectedIcon 选中时的icon
• onPress 点击时间监听

截图如下：

源码