360SDN.COM

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

来源:  2017-06-18 16:48:37    评论:0点击:

官方为我们提供的Tab控制器有两种:
TabBarIOS,仅适用于IOS平台
ViewPagerAndroid,仅适用于Android平台(严格来讲并不算,因为我们还需要自己实现Tab)

如果我们需要一个更通用的Tab控制器,那么就要借助开源的力量,本篇文章教你如何使用
react-native-scrollable-tab-view,这是官方Demo的效果

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

demo.gif

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

demo-fb.gif

一、准备工作

  1. 新建一个项目
     react-native init Demo6
  2. 添加react-native-scrollable-tab-view
     npm install react-native-scrollable-tab-view --save

二、Props介绍

  • renderTabBar(Function:ReactComponent)
    TabBar的样式,系统提供了两种默认的,分别是DefaultTabBarScrollableTabBar。当然,我们也可以自定义一个,我们会在下篇文章重点讲解如何去自定义TabBar样式。

    render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}>
          <Text tabLabel='Tab1'/>
          <Text tabLabel='Tab2'/>
          <Text tabLabel='Tab3'/>
          <Text tabLabel='Tab4'/>
          <Text tabLabel='Tab5'/>
          <Text tabLabel='Tab6'/>
        </ScrollableTabView>
      );
    }

    注意:每个被包含的子视图需要使用tabLabel属性,表示对应Tab显示的文字
    DefaultTabBar:Tab会平分在水平方向的空间

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

    default.png


    ScrollableTabBar:Tab可以超过屏幕范围,滚动可以显示

     

    scrollable.png

  • tabBarPosition(String,默认值'top')

    render() {
      return (
        <ScrollableTabView
          tabBarPosition='top'
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }

    top:位于屏幕顶部

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

    default.png


    bottom:位于屏幕底部

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

    bottom.png


    overlayTop:位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

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

    overlayTop.png


    overlayBottom:位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)

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

    overlayBottom.png

  • onChangeTab(Function)
    Tab切换之后会触发此方法,包含一个参数(Object类型),这个对象有两个参数
    i:被选中的Tab的下标(从0开始)
    ref:被选中的Tab对象(基本用不到)

    render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}
          onChangeTab={(obj) => {
              console.log('index:' + obj.i);
            }
          }>
          ...
        </ScrollableTabView>
      );
    }
  • onScroll(Function)
    视图正在滑动的时候触发此方法,包含一个Float类型的数字,范围是[0, tab数量-1]

    render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}
          onScroll={(postion) => {  
              // float类型 [0, tab数量-1]  
              console.log('scroll position:' + postion);
            }
          }>
          ...
        </ScrollableTabView>
      );
    }
  • locked(Bool,默认为false)
    表示手指是否能拖动视图,默认为false(表示可以拖动)。设为true的话,我们只能“点击”Tab来切换视图。
    render() {
      return (
        <ScrollableTabView
          locked={false}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }
  • initialPage(Integer)
    初始化时被选中的Tab下标,默认是0(即第一页)
    render() {
      return (
        <ScrollableTabView
          initialPage={1}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }
  • page(Integer)
    设置选中指定的Tab(然而测试下来并没有任何效果,知道原因的同学麻烦留言下 ~)

    写于2016.06.29:跟作者沟通下来下个版本打算废弃这个属性,原话为‘It is a legacy I would like to remove it but someone might use it. Probably in next version I'll remove it.’参考issue#320

  • children(ReactComponents)
    表示所有子视图的数组,比如下面的代码,children则是一个长度为6的数组,元素类型为Text
    render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}>
          <Text tabLabel='Tab1'/>
          <Text tabLabel='Tab2'/>
          <Text tabLabel='Tab3'/>
          <Text tabLabel='Tab4'/>
          <Text tabLabel='Tab5'/>
          <Text tabLabel='Tab6'/>
        </ScrollableTabView>
      );
    }
  • tabBarUnderlineColor(String)
    设置DefaultTabBarScrollableTabBarTab选中时下方横线的颜色
  • tabBarBackgroundColor(String)
    设置整个Tab这一栏的背景颜色
  • tabBarActiveTextColor(String)
    设置选中Tab的文字颜色
  • tabBarInactiveTextColor(String)
    设置未选中Tab的文字颜色
  • tabBarTextStyle(Object)
    设置Tab文字的样式,比如字号、字体等
    上面这5个样式示例如下

    render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar />}
          tabBarUnderlineColor='#FF0000'
          tabBarBackgroundColor='#FFFFFF'
          tabBarActiveTextColor='#9B30FF'
          tabBarInactiveTextColor='#7A67EE'
          tabBarTextStyle={{fontSize: 18}}
        >
        ...
        </ScrollableTabView>
      );
    }
     

    top5.png

  • style(View.propTypes.style)
    系统View都拥有的属性,基本不会涉及到。

  • contentProps(Object)
    这里要稍微说下react-native-scrollable-tab-view的实现,其实在Android平台底层用的是ViewPagerAndroid,iOS平台用的是ScrollView。这个属性的意义是:比如我们设置了某个属性,最后这个属性会被应用在ScrollView/ViewPagerAndroid,这样会覆盖库里面默认的,通常官方不建议我们去使用。
  • scrollWithoutAnimation(Bool,默认为false)
    设置“点击”Tab时,视图切换是否有动画,默认为false(即:有动画效果)。
    render() {
      return (
        <ScrollableTabView
          scrollWithoutAnimation={true}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }
    注意:这个属性的设置对滑动视图切换的动画效果没有影响,仅仅对“点击”Tab效果有作用。看下下面动态图的对比(今天录得动态图不知道为啥抽疯了,调了好几遍都不行,凑合看吧~)
     

 

阅读原文

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权