react-native tab标签

来源：互联网发布：.net b2b商城源码编辑：程序博客网时间：2024/06/10 10:12

现在，我们的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 点击时间监听

截图如下：
这里写图片描述

源码

0 0