超强通用的 React Native Tab 控制器使用详解 - 进阶篇

江清清
3,076 阅读4分钟
原文链接： mp.weixin.qq.com

官方给我们提供了Tab控制器,但是那个不是双平台通用的,不过借助开源的力量可以实现通用的Tab控制器效果。投稿人:hiphonezhu 地址:http://www.jianshu.com/p/b0cfe7f11ee7

本文所讲知识点

  • 开源项目react-native-scrollable-tab-view的自定义使用方法

前言

在上一篇文章当中，我们学习了react-native-scrollable-tab-view的基本使用方式，包括基本Props的使用介绍等。我们知道官方为我们提供了两种基本的Tab控制器样式，DefaultTabBar和ScrollableTabBar。很多情况下，官方的样式并不能满足我们的需求（备注：官方的样式是文字+下划线的风格），那么此时就需要我们自己来实现特定的样式。

超强通用的React Native Tab控制器使用详解-入门篇

准备工作

2.1.新建一个项目

查看图片
2.2.添加react-native-scrollable-tab-view

查看图片
2.3.添加react-native-vector-icons

查看图片
rnpm是一个React Native包管理器，我们也可以通过编辑android/app/build.gradle 添加下面的行达到同样的目的:

查看图片

react-native-vector-icons介绍：

一个“图标”库，官方描述为‘3000 Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full stying.’ 可见，这个库为我们提供了很多图标，如果你不想花费时间去设计一些图标，不妨使用这个库来替代。

有趣的是，这个库的图标来源有很多，下面大概列举了一些：

  • Entypo by Daniel Bruce (411icons)

  • EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0,70icons)

  • FontAwesome by Dave Gandy (v4.6.3,634icons)

  • Foundation by ZURB, Inc. (v3.0,283icons)

  • Ionicons by Ben Sperry (v3.0.0,859icons)

  • MaterialIcons by Google, Inc. (v2.2.3,932icons)

  • Octicons by Github, Inc. (v3.5.0,166icons)

  • Zocial by Sam Collins (v1.0,100icons)

其中用的最多的是Ionicons ，所以本篇文章的图标来源也就选择它了。

另外，react-native-vector-icons的用法非常的多，我们今天只会用到3个基本属性：

查看图片

其中，name就是你要使用的图标名称，如果我们选择Ionicons ，让我们看下如何找到你需要的图标，进入Ionicons ，我们看到如下的界面

查看图片
红色区域输入你想要的图标名称（英文哈~），比如我们输入search，结果页面如下查看图片
每个图标，都提供了iOS、iOS-Outline、Material Design三种不同风格的样式，点击结果中的某一行数据，出现如下界面

查看图片
红色区域就是我们最终需要的图标的名称，即name的值。

开始工作

首先，自定义一个TabBar组件你需要知道以下几个点：

  • 添加必要属性到组件中（必选）

查看图片

  • setAnimationValue（可选，如果你需要在tab切换的时候有动画效果）

查看图片

  • render方法需要返回一个组件作为TabBar

  • 跟其他任何组件一样，你可以传递自己的props

好了，介绍完要点，我们就开始编写TabBar组件了。

3.1.新建一个WeixinTabBar.js文件，导入Ionicons

查看图片
3.2.我们希望每个Tab的图标和名称都是外部组件通过prop传递进来，而不是内部写死，这样有利于扩展，所以我们添加两个prop：tabNames和tabIconNames

查看图片
3.3.实现render方法

查看图片

这个方法很简单，返回一个容器View，容器View内包含的子View是通过遍历tabs，调用renderTabOption方法来动态生成的。

3.4.实现renderTabOption方法

查看图片
代码分析

---------------------------start---------------------------

首先，判断i是否是当前选中的activeTab，来使用不同的颜色，然后：

TouchableOpacity：点击触发onPress方法，使用goToPage跳转到对应的tab

Icon：设置name(图标，使用tabIconNames[i]获取)，size(图标大小)，color(图标颜色)

Text：设置文本（使用tabNames[i]获取），color(文字颜色)

---------------------------end---------------------------


3.5.使用WeixinTabBar

打开index.android.js文件，导入ScrollableTabView 和 WeixinTabBar

查看图片

我们最终实现的效果图有4个tab，所以这里定义两个数组tabNames和tabIconNames，分别表示每个tab显示的文字和图片

查看图片

最后，实现render方法

查看图片

其中renderTabBar使用我们自定义的WeixinTabBar。需要说明的是，即使我们不使用系统的DefaultTabBar和ScrollableTabBar，但tabLabel这个属性必须使用，且值不能重复。


再说两句 本篇主要介绍该Tab控制器库的使用进阶篇,进行自定义设置。后边还会更新更多精彩内容,还请持续关注本公众号。

本公众号欢迎大家投稿，如果你希望你的文章可以被更多人看到，直接将md、doc等格式的文章到我邮箱即可（781931404@qq.com），也可以加我QQ/微信(781931404)好友，需要注明（投稿），谢谢。


查看图片





avatar
文章
阅读
粉丝