react-native tab标签

最新推荐文章于 2024-08-16 09:36:18 发布

蓋亞光

最新推荐文章于 2024-08-16 09:36:18 发布

阅读量2k

点赞数

分类专栏： React Native学习笔记文章标签： react-nati 底部导航栏 tabs标签

本文链接：https://blog.csdn.net/CSDN_GYG/article/details/71124846

版权

React Native学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

现在，我们的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>