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

最新推荐文章于 2024-09-01 08:47:00 发布

Quiet-Night

最新推荐文章于 2024-09-01 08:47:00 发布

阅读量3.7k

点赞数

分类专栏： React 文章标签： android平台

本文链接：https://blog.csdn.net/DeepLies/article/details/53147113

版权

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

摘要由CSDN通过智能技术生成

对于一款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={() => <Imag