ReactNative--在Android上使用TabNavigator实现页面导航

最新推荐文章于 2021-05-26 23:54:34 发布

原创最新推荐文章于 2021-05-26 23:54:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ReactNative页面导航 #Tab-Navigator

WEB 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何在React Native项目中使用react-native-tab-navigator组件实现TabBar功能，包括安装、配置及自定义样式等步骤，并提供了一个完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native默认提供了TabBarIOS组件用于提供视图切换功能，但这个组件是不能跨平台的，如果希望在Android平台上实现TabBar功能需要自己使用第三方js库，我在GitHub上找到了一个react-native-tab-navigator组件用于安卓上的TabBar实现。它的效果如下：

首先需要安装组件到你的项目中，在你的项目所在文件夹通过命令行执行：

    npm install react-native-tab-navigator --save

接着在项目头引入该组件：

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

最后在你的视图中通过标签<TabNavigator>来使用该组件，在<TabNavigator.Item>标签内渲染每个标签页。

<TabNavigator>常用的属性有：

sceneStyle：定义视图区域的样式
tabBarStyle：定义底部标签栏的样式
tabBarShadowStyle：定义底部标签栏阴影样式

例如要隐藏底部标签栏：

<TabNavigator
  tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: 0 }}
/>

<TabNavigator.Item>常用属性有：

title：定义图标底部显示的文字
badgeText：定义图标右上角显示的角标
selected：为true时代表当前页面被选中。通过与this.state.selectedTab进行比较来判断当前页是否被选中。
renderIcon：定义图标的渲染方法。
renderSelectedIcon：定义图标被激活时的渲染方法。如果不指定，默认渲染为蓝色背景。
onPress：点击触发的函数。一般当点击时调用setState方法修改state中selectedTab来切换当前被选中的页面。

例如：

<TabNavigator>
  <TabNavigator.Item 
    title='首页'
    badgeText="new"
    selected={this.state.selectedTab==='home'}
    renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/home"}} />}
    renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/home_active"}} />}
    onPress={()=>{this.setState({selectedTab:'home'})}}
  >
    <View style={[styles.pageView,{backgroundColor:'#ffdd57'}]}>
      <Text style={{fontSize:50}}>首页</Text>
    </View>
  </TabNavigator.Item>

完整的代码如下：

/*TabNavigatorDemo*/
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

export default class App extends Component{
  constructor(props){
    super(props);
    this.state={
      selectedTab:'home'
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <View style={styles.header}><Text style={{fontSize:25}}>TabNavigator组件</Text></View>
        <TabNavigator>
          <TabNavigator.Item title='首页'
                             badgeText="new"
                             selected={this.state.selectedTab==='home'}
                             renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/home"}} />}
                             renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/home_active"}} />}
                             onPress={()=>{this.setState({selectedTab:'home'})}}
          >
            <View style={[styles.pageView,{backgroundColor:'#ffdd57'}]}>
              <Text style={{fontSize:50}}>首页</Text>
            </View>
          </TabNavigator.Item>
          <TabNavigator.Item title='分类'
                             selected={this.state.selectedTab==='category'}
                             renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/category"}} />}
                             renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/category_active"}} />}
                             onPress={()=>{this.setState({selectedTab:'category'})}}
          >
            <View style={[styles.pageView,{backgroundColor:'#ff8454'}]}>
              <Text style={{fontSize:50}}>分类详情</Text>
            </View>
          </TabNavigator.Item>
          <TabNavigator.Item title='发现'
                             selected={this.state.selectedTab==='find'}
                             renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/find"}} />}
                             renderSelectedIcon={()=><Image style={styles.iconActive} source={{uri:"mipmap/find_active"}} />}
                             onPress={()=>{this.setState({selectedTab:'find'})}}
          >
            <View style={[styles.pageView,{backgroundColor:'#9aff5a'}]}>
              <Text style={{fontSize:50}}>发现更多</Text>
            </View>
          </TabNavigator.Item>
          <TabNavigator.Item title='我的'
                             badgeText="6"
                             selected={this.state.selectedTab==='mine'}
                             renderIcon={()=><Image style={styles.iconImg} source={{uri:"mipmap/mine"}} />}
                             onPress={()=>{this.setState({selectedTab:'mine'})}}
          >
            <View style={[styles.pageView,{backgroundColor:'#648eff'}]}>
              <Text style={{fontSize:50}}>我的空间</Text>
            </View>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  header:{
    height:50,
    backgroundColor:'#bcfffd',
    justifyContent:'center',
    alignItems:'center'
  },
  pageView:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  iconImg:{
    width:25,
    height:25
  },
  iconActive:{
    width:35,
    height:35
  }
});