react-native之tabBar在Android平台上的实现

最新推荐文章于 2024-04-29 00:40:04 发布

原创最新推荐文章于 2024-04-29 00:40:04 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android平台

React 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Android平台上使用React Native实现TabBar组件。由于RN官方的TabBar组件不适用于Android，作者推荐并详细说明了如何通过第三方库react-native-tab-navigator进行集成和自定义，包括安装模块、导入项目以及基本使用方法。文中还提到了组件的使用，以及图标选择的两种方式，包括自定义图片和使用第三方图标库Ionicons。

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

对于一款App来说，TabBar可谓是最基本的一个组件了，在绝大部分的App上都能看到它的身影，要想使用RN实现这一基本组件，RN官方针对IOS已经提供了TabBarIOS这个组件，但是此组件并不适合Android平台，而且官方对于Android也是一直没有与之对应的TtabBar`组件，所以想要实现这一功能，只能借助第三方了。

这里我想要介绍的是一个名为react-native-tab-navigator的组件，在github上的地址是 react-native-tab-navigator

首先看一下效果图：

这里写图片描述

底部那三个tab就是要使用react-native-tab-navigator实现的效果了。

具体步骤如下：

1. 首先引入模块包

安装
npm install react-native-tab-navigator –save

引入到项目中
import TabNavigator from ‘react-native-tab-navigator’

2. 使用

基本使用如下：

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

这是官方给出的最基本的例子，显然不能满足绝大多数的场景，但是我们自己动手改一改也就成了。

例如我在一开始给出的那个效果中，就是我自己动手优化后的效果，具体代码如下：

<TabNavigator tabBarStyle={styles.tab}>

            <TabNavigatorItem
              selected={this.state.selectedTab==='List'}
              renderIcon={()=><Icon name="ios-videocam-outline" size={30} color="#4F8EF7" />}
              renderSelectedIcon={()=><Image source={require('./my-icon.png')} />}
              onPress={()=>this.setState({selectedTab:'List'})}>
                <Text>这是List页面</Text>
            </TabNavigatorItem>
            <TabNavigatorItem
            selected={this.state.selectedTab==='Edit'}
            renderIcon={()=><Icon name="ios-recording-outline" size={30} color="#4F8EF7" />}
            renderSelectedIcon={()=><Icon name="ios-recording" size={30} color="#4F8EF7" />}
            onPress={()=>this.setState({selectedTab:'Edit'})}>
            <Text>这是Edit页面</Text>
            </TabNavigatorItem>
            <TabNavigatorItem
            selected={this.state.selectedTab==='Account'}
            renderIcon={()=><Icon name="ios-more-outline" size={30} color="#4F8EF7" />}
            renderSelectedIcon={()=><Icon name="ios-more" size={30} color="#4F8EF7" />}
            onPress={()=>this.setState({selectedTab:'Account'})}>
            <Accoun/>
            </TabNavigatorItem>
        </TabNavigator>

其中，<Accoun/>组件，是从外部引入的页面，类似于前面的<Text></Text>组件，点击对应的TabBar就能显示出<Accoun/>组件中的页面来。

至于TabBar上图标的选择，一种是你可以自己选定图片，例如上面的<Image source={require('./my-icon.png')} />
第二种就是使用第三方图标，我这里推荐使用react-native-vector-icons，使用方法也很简单，如同上面的<Icon name="ios-videocam" size={30} color="#4F8EF7" />，这个组件库几乎可以满足任何场景下的图标展示，具体可以参照 ionicons.com