3218人阅读
Flex4（44）
　Flex 4中有两种方法来实现Tabbed Navigation功能，TabNavigator组件或TabBar加ViewStack的组合组件都能完成该功能，但这两者有各自的优缺点。
　　如果不注重外观又想实现得简单，那么就选择TabNavigator组件吧；如果注重外观，那么就一定要选择TabBar加ViewStack的组合组件了，我个人必定选择第二种。
　　下面让我们来看一看我为什么这么说吧。
TabNavigator组件的使用：&
&mx:TabNavigator&
// NavigatorContent的label就是上面标签栏的显示。
// NavigatorContent的内容就是选定标签的相应显示内容。
&s:NavigatorContent label=&Panel 1&/&
&s:NavigatorContent label=&Panel 2&/&
&s:NavigatorContent label=&Panel 3&/&
&/mx:TabNavigator&
优点：实现简单
缺点：自定义外观比较麻烦（TabNavigator是mx组件不能使用skinClass来自定义外观，只能用css样式。因为Flex 4默认主题spark的强大，所以我们一定是使用spark主题来实际开发，而在spark主题下大部分用来设置TabNavigator样式的css样式都用不了了。）
TabBar加ViewStack组合组件的使用：
&s:VGroup gap=&0&&
&s:TabBar dataProvider=&{vs}&/&
// NavigatorContent的label就是TabBar标签栏的显示。
// NavigatorContent的内容就是选定TabBar标签的相应显示内容。
&mx:ViewStack id=&vs& borderStyle=&none&&
&s:NavigatorContent label=&Panel 1&/&
&s:NavigatorContent label=&Panel 2&/&
&s:NavigatorContent label=&Panel 3&/&
&/mx:ViewStack&
&/s:VGroup&
优点：轻松自定义外观（看到TabBar是spark组件就能知道为什么说是“轻松自定义外观”了吧，强大的skinClass让你无所不能，就不用我多说了吧。）
缺点：实现起来比TabNavigator稍稍复杂一点（对大家来说这么一点复杂性和没有也差不多吧。）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：211133次
积分：2172
积分：2172
排名：第15380名
转载：72篇
评论：21条
(3)(2)(2)(1)(5)(11)(10)(19)(19)(9)【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:react-native-tab-navigator) - 推酷
【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:react-native-tab-navigator)
本篇主要来详细介绍如何安装、升级插件及讲解一个react-native-tab-navigator的示例。
首先推荐一个插件网站：
（此插件属于半官方维护的）
本文举例使用的插件：react-native-tab-navigator ，选项卡形式的导航
找到我们想使用的插件, 搜索： react-native-tab-navigator
2. 我们可以看到插件介绍页面有详细的介绍，以及如何安装也有介绍，如下图：
图中红色框选的是插件在github的源码页面地址～
3. 下面对项目进行安装此插件：
3.1 &打开终端，cd 到项目根路径
3.2 使用命令：
npm install react-native-tab-navigator –save
进行安装，如下图：
3.3 安装成功后，你会在项目下的package.json文件内dependencies下看到(如下图)：
新增加了一条：”react-native-tab-navigator”: “^0.3.2”
4. 更新插件的两种方式方式（上）：
4.1: &打开终端，cd 到目标项目根路径
4.2 使用命令:
npm install xxx@
yyy –save –registry& zzz
& –save & 记录版本到项目的package.json下留底（一般最好都带上）
& –registry
指定 镜像源
： @符号前是 插件名，
@ 符号后是插件
目标版本号
（如果目标版本号yyy填：latest &表示该插件的最新版本） &
zzz ：制定的镜像源地址
这里举例：
npm install[email&protected] –save
以上命令： 更新react-native-tab-navigator插件到最新 &，且将版本号记录到项目的json文件中 。 & &
4. 更新插件的两种方式方式（下）：
4.1 ：利用插件检查模块最新版本：
4.2 : &安装到项目中，然后利用命令：ncu &进行查看版本，如下图：
5. 插件的使用：
5.1: 首先导入（使用node_modules下的模块，不需要路径）：
importTabNavigatorfrom 'react-native-tab-navigator';
5.2 : &绘制代码段：
render() {
&&&&return (
&&&&&&......
&&&&&&&&&TabNavigatortabBarStyle={styles.tab} &
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'home'}
&&&&&&&&&&&&title=&Home&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/home_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/home_focus.png')} /&}
&&&&&&&&&&&&badgeText=&61&
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'home' })}&
&&&&&&&&&Viewstyle={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}&
&&&&&&&& &&&&&Text style={{fontSize:20}}&我是第一个选项卡，直接书写出的视图!&/Text&
&&&&&&&&&/View&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'profile'}
&&&&&&&&&&&&title=&Profile&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/personal_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/personal_focus.png')} /&}
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'profile' })}&
&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&TestPage/&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&/TabNavigator&
&&&&&&......
TabNavigator.Item: 每个选项卡的组件名，其中属性解释：
selected： 当前选项卡是否被选中
title： 标题
renderIcon： icon
renderSelectedIcon： 被选中时的icon
badgeText： 提示的角标数字
onPress： 点击后事件响应函数
当选项卡被选中后，才会显示选项卡绘制的视图内容。
最后给出一个示例,两个文件：
importReact, { Component } from 'react';
&&StyleSheet,
} from 'react-native';
importTabNavigatorfrom 'react-native-tab-navigator';
importTestPagefrom './TestPage';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
&&&&&&selectedTab:'home'
&&render() {
&&&&return (
&&&&&&&Viewstyle={{flex: 1}}&
&&&&&&&&&Text style={styles.himiTextStyle}&HimiReactNative 系列教程&/Text&
&&&&&&&&&TabNavigatortabBarStyle={styles.tab} &
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'home'}
&&&&&&&&&&&&title=&Home&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/home_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/home_focus.png')} /&}
&&&&&&&&&&&&badgeText=&61&
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'home' })}&
&&&&&&&&&Viewstyle={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}&
&&&&&&&& &&&Text style={{fontSize:20}}&我是第一个选项卡，直接书写出的视图!&/Text&
&&&&&&&&&/View&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&&&TabNavigator.Item
&&&&&&&&&&&&selected={this.state.selectedTab === 'profile'}
&&&&&&&&&&&&title=&Profile&
&&&&&&&&&&&&renderIcon={() =& &Image source={require('./res/personal_normal.png')} /&}
&&&&&&&&&&&&renderSelectedIcon={() =& &Image source={require('./res/personal_focus.png')} /&}
&&&&&&&&&&&&onPress={() =& this.setState({ selectedTab: 'profile' })}&
&&&&&&&&&&&&&&&&&TestPage/&
&&&&&&&&&&&&&/TabNavigator.Item&
&&&&&&&&&&&/TabNavigator&
&&&&&&&/View&
var styles = StyleSheet.create({
&&&&&&&&height: 100,
&&&&&&&&backgroundColor: '#eee',
&&&&&&&&alignItems: 'center'
&&&&himiTextStyle:{
&&&&&&backgroundColor:'#eee',
&&&&&&color:'#f00',
&&&&&&fontSize:30,
&&&&&&marginTop:30,
TestPage.js
importReact, { Component } from 'react';
} from 'react-native';
importTabNavigatorfrom 'react-native-tab-navigator';
export default class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
&&&&&&selectedTab:'home'
&&render() {
&&&&return (
&&&&&&&Viewstyle={{flex:1,backgroundColor:'#eee',justifyContent:'center'}}&
&&&&&&&&&&&Text style={{fontSize:20,color:'#f00'}}&我是TestPage，导入使用的!&/Text&
&&&&&&&/View&
效果演示(点击查看动态图)：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致1721人阅读
Flex（169）
1、问题背景
& & &遇到这样一个问题：有四个Tab选项卡，根据不同的参数隐藏和显示选项卡
2、实现实例
（1）隐藏“春季”
protected function springClickHandler(event:MouseEvent):void
tabs.getTabAt(0).visible =
tabs.getTabAt(0).includeInLayout =
tabs.getTabAt(1).visible =
tabs.getTabAt(1).includeInLayout =
tabs.getTabAt(2).visible =
tabs.getTabAt(2).includeInLayout =
tabs.getTabAt(3).visible =
tabs.getTabAt(3).includeInLayout =
tabs.selectedIndex = 1;
（2）隐藏“夏季”
protected function summerClickHandler(event:MouseEvent):void
tabs.getTabAt(0).visible =
tabs.getTabAt(0).includeInLayout =
tabs.getTabAt(1).visible =
tabs.getTabAt(1).includeInLayout =
tabs.getTabAt(2).visible =
tabs.getTabAt(2).includeInLayout =
tabs.getTabAt(3).visible =
tabs.getTabAt(3).includeInLayout =
tabs.selectedIndex = 0;
（3）隐藏“秋季”
protected function autumnClickHandler(event:MouseEvent):void
tabs.getTabAt(0).visible =
tabs.getTabAt(0).includeInLayout =
tabs.getTabAt(1).visible =
tabs.getTabAt(1).includeInLayout =
tabs.getTabAt(2).visible =
tabs.getTabAt(2).includeInLayout =
tabs.getTabAt(3).visible =
tabs.getTabAt(3).includeInLayout =
tabs.selectedIndex = 0;
（4）隐藏“冬季”
protected function winterClickHandler(event:MouseEvent):void
tabs.getTabAt(0).visible =
tabs.getTabAt(0).includeInLayout =
tabs.getTabAt(1).visible =
tabs.getTabAt(1).includeInLayout =
tabs.getTabAt(2).visible =
tabs.getTabAt(2).includeInLayout =
tabs.getTabAt(3).visible =
tabs.getTabAt(3).includeInLayout =
tabs.selectedIndex = 0;
（5）显示“四季”
protected function fourClickHandler(event:MouseEvent):void
tabs.getTabAt(0).visible =
tabs.getTabAt(0).includeInLayout =
tabs.getTabAt(1).visible =
tabs.getTabAt(1).includeInLayout =
tabs.getTabAt(2).visible =
tabs.getTabAt(2).includeInLayout =
tabs.getTabAt(3).visible =
tabs.getTabAt(3).includeInLayout =
tabs.selectedIndex = 0;
3、实例结果
（1）初始化
（2）点击“春季”按钮
（3）点击“夏季”按钮
（4）点击“秋季”按钮
（5）点击“冬季”按钮
（6）点击“四季”按钮
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3092746次
积分：50805
积分：50805
排名：第50名
原创：1839篇
转载：76篇
评论：888条
文章：47篇
阅读：46133
文章：10篇
阅读：25029
文章：13篇
阅读：23519
文章：14篇
阅读：62429
(19)(24)(31)(37)(9)(16)(29)(25)(28)(33)(35)(30)(17)(11)(21)(28)(31)(33)(43)(35)(35)(26)(29)(27)(55)(75)(19)(58)(41)(11)(35)(13)(37)(120)(68)(106)(66)(100)(83)(76)(78)(34)(56)(29)(53)(46)(15)本帖子已过去太久远了，不再提供回复功能。Flex中TabNavigator设置Tabs样式思路及源码
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Flex中TabNavigator如何设置Tabs样式有哪些思路，感兴趣的朋友可以看看下面的源码
1、设计思路 （1）设计一个TabNavigator，其中包含两个Tabs； （2）设置Tabs样式 2、设计源码 Tabs.mxml：
代码如下: &?xml version="1.0" encoding="utf-8"?& &s:Application xmlns:fx="/mxml/2009" xmlns:s="library:///flex/spark" xmlns:mx="library:///flex/mx" width="100%" height="100%" & &fx:Declarations& &!-- Define custom colors for use as fills. --& &mx:SolidColor id="sc1" color="0xADFF2F" alpha=".8"/& &mx:SolidColor id="sc2" color="0xADD8E6" alpha=".6"/& &!-- Define custom Strokes for the columns. --& &mx:SolidColorStroke id="s1" color="0xADFF2F" weight="2"/& &mx:SolidColorStroke id="s2" color="0xADD8E6" weight="2"/& &/fx:Declarations& &fx:Style& @namespace s "library:///flex/spark"; @namespace mx "library:///flex/mx"; .myTabs{ color:#FFFFFF; font-weight: background-color:#6495ED; } .myTextTabs{ color:#8B0000; background-color:#97FFFF; font-weight: } mx|TabNavigator{ tab-style-name:"myTabs"; first-tab-style-name:"myTabs"; last-tab-style-name:"myTabs"; selected-tab-text-style-name:"myTextTabs"; } &/fx:Style& &fx:Script& &![CDATA[ import mx.collections.ArrayC [Bindable] //学生数据绑定 private var studentArray:ArrayCollection = new ArrayCollection([ {sno:"",math:"96"}, {sno:"",math:"89"}, {sno:"",math:"87"}, {sno:"",math:"90"}, {sno:"",math:"78"}, {sno:"",math:"69"}, {sno:"",math:"92"}, {sno:"",math:"80"}, {sno:"",math:"60"}, {sno:"",math:"89"} ]); [Bindable] //教师数据绑定 private var teacherArray:ArrayCollection = new ArrayCollection([ {tno:"",tscore:"96"}, {tno:"",tscore:"99"}, {tno:"",tscore:"77"}, {tno:"",tscore:"70"}, {tno:"",tscore:"98"}, {tno:"",tscore:"79"}, {tno:"",tscore:"82"}, {tno:"",tscore:"70"}, {tno:"",tscore:"80"}, {tno:"",tscore:"79"} ]); ]]& &/fx:Script& &mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"& &mx:TabNavigator width="100%" height="100%" fontSize="12" cornerRadius="8"& &s:NavigatorContent label="学生" width="100%" height="100%"& &mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"& &mx:ColumnChart id="column" dataProvider="{studentArray}" showDataTips="true" width="100%" height="100%" fontSize="12"& &mx:horizontalAxis& &mx:CategoryAxis categoryField="sno" displayName="学号"/& &/mx:horizontalAxis& &mx:series& &mx:ColumnSeries displayName="数学成绩" xField="sno" yField="math" fill="{sc1}" stroke="{s1}"/& &/mx:series& &/mx:ColumnChart& &mx:HBox width="100%" height="30"& &s:Label width="50%"/& &mx:Legend dataProvider="{column}"/& &/mx:HBox& &/mx:VBox& &/s:NavigatorContent& &s:NavigatorContent label="教师" width="100%" height="100%" fontSize="12"& &mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"& &mx:ColumnChart id="column1" dataProvider="{teacherArray}" showDataTips="true" width="100%" height="100%" fontSize="12"& &mx:horizontalAxis& &mx:CategoryAxis categoryField="tno" displayName="工号"/& &/mx:horizontalAxis& &mx:series& &mx:ColumnSeries displayName="教师评分" xField="tno" yField="tscore" fill="{sc2}" stroke="{s2}"/& &/mx:series& &/mx:ColumnChart& &mx:HBox width="100%" height="30"& &s:Label width="50%"/& &mx:Legend dataProvider="{column1}"/& &/mx:HBox& &/mx:VBox& &/s:NavigatorContent& &/mx:TabNavigator& &/mx:VBox& &/s:Application&
3、设计说明 （1）tab-style-name：设置所有tabs的样式类 （2）first-tab-style-name：设置第一个tabs的样式类 （3）last-tab-style-name：设置最后一个tabs的样式类 （4）selected-tab-text-style-name：设置选中的tabs中的text样式类 4、设计结果 （1）初始化时结果 &（2）切换tabs
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}