React Native文章react-native-scrollable-tab-view(进阶篇).docx

　　React Native系列文章(十一)react-native-scrollable-tab-view(进阶篇) 　　很多情况下，官方的样式并不能满足我们的需求(备注：官方的样式是文字+下划线的风格)，那么此时就需要我们自己来实现特定的样式。 　　本文要实现这样的效果： 　　一、准备工作 　　1.新建一个项目 　　react-native init Demo7 　　2.添加react-native-scrollable-tab-view 　　npm install react-native-scrollable-tab-view --save 　　3.添加react-native-vector-icons 　　 npm install react-native-vector-icons --save 　　 rnpm link rnpm是一个React Native包管理器，我们也可以通过编辑android/app/build.gradle 添加下面的行达到同样的目的: 　　apply from: ../../node_modules/react-native-vector-icons/fonts.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组件你需要知道以下几个点： 　　添加必要属性到组件中(必选) 　　propTypes = { 　　goToPage: React.PropTypes.func, // 跳转到对应tab的方法 　　activeTab: React.PropTypes.number, // 当前被选中的tab下标 　　tabs: React.PropTypes.array, // 所有tabs集合 　　} 　　实现setAnimationValue(可选，如果你需要在tab切换的时候有动画效果) 　　setAnimationValue({value}) { 　　} 　　render方法需要返回一个组件作为TabBar 　　跟其他任何组件一样，你可以传递自己的props 　　好了，介绍完要点，我们就开始编写TabBar组件了。 　　1.新建一个WeixinTabBar.js文件，导入Ionicons 。 　　import Icon from react-native-vector-icons/Ionicons; 　　2.我们希望每个Tab的图标和名称都是外部组件通过prop传递进来，而不是内部写死，这样有利于扩展，所以我们添加两个prop：tabNames和tabIconNam