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

本文介绍了如何在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. 首先引入模块包

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

  2. 引入到项目中
    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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值