[React Native]react-native-scrol

作者: zhuhf | 来源:发表于2016-06-23 14:46 被阅读40092次

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

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

    demo.gif 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会平分在水平方向的空间

      default.png
      ScrollableTabBar:Tab可以超过屏幕范围,滚动可以显示
      scrollable.png
    • tabBarPosition(String,默认值'top')
      render() {
      return (
      <ScrollableTabView
      tabBarPosition='top'
      renderTabBar={() => <DefaultTabBar/>}>
      ...
      </ScrollableTabView>
      );
      }
      top:位于屏幕顶部

      default.png
      bottom:位于屏幕底部
      bottom.png
      overlayTop:位于屏幕顶部,悬浮在内容视图之上(看颜色区分:视图有颜色,Tab栏没有颜色)
      overlayTop.png
      overlayBottom:位于屏幕底部,悬浮在内容视图之上(看颜色区分:视图有颜色,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>
      );
      }

    2016.12.12更新:react-native-scrollable-tab-view最新版本0.7.0,此属性在Android平台无效,具体表现为页面不会被“渲染”,但是iOS平台是没问题的。建议大家暂时使用0.6.0,作者表示已经准备修复此问题,详见:https://github.com/skv-headless/react-native-scrollable-tab-view/issues/483

    • 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>
      );
      }

    • tabBarUnderlineStyle(style)
      设置DefaultTabBarScrollableTabBarTab选中时下方横线的颜色

    • tabBarBackgroundColor(String)
      设置整个Tab这一栏的背景颜色

    • tabBarActiveTextColor(String)
      设置选中Tab的文字颜色

    • tabBarInactiveTextColor(String)
      设置未选中Tab的文字颜色

    • tabBarTextStyle(Object)
      设置Tab文字的样式,比如字号、字体等
      上面这5个样式示例如下

      render() {
        return (
          <ScrollableTabView
            renderTabBar={() => <DefaultTabBar />}
            tabBarUnderlineStyle={{backgroundColor:'#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效果有作用。看下下面动态图的对比(今天录得动态图不知道为啥抽疯了,调了好几遍都不行,凑合看吧~)

      click.gif
      slide.gif

    好了,感谢大家耐心看到最后,下篇文章会介绍react-native-scrollable-tab-view如何去自定义一个TabBar样式。感兴趣的朋友请继续阅读[React Native]react-native-scrollable-tab-view(进阶篇)

    相关文章

      网友评论

      • 呐小伟:博主,您好! 要更改tab下划线的长度,是不是只能自定义呢?
        我看官网和您的帖子都没有体现这个问题
      • 佷镹茤镹:请教个问题
        react-native-scrollable-tab-view: ScrollableTabBar和FlatList结合 切换Tab时很卡顿
        这个有人知道怎么解决吗
      • IT界的段子手:那个点击后面的都居中偏移是怎么算的
      • 一往情深_b560:renderTabBar 使用ScrollableTabBar 时, tabBarUnderlineStyle 最开始不显示下划线, 需要点击tab 才会显示, 使用DefaultTabBar 就没这个问题,你可以试试
      • 下一站不是永远_dca0:你好,为啥我在android模拟器中一片空白,什么都没显示,是否有什么坑,
      • encumbranc_c9e0:请问怎么去除滑动切换标签的动画,感觉有卡顿,类似scrollWithoutAnimation={true},不过它只能去除点击切换的动画
      • encumbranc_c9e0:ScrollableTabBar有明显卡顿
      • encumbranc_c9e0:如何让tab不平分空间?有没有设置width的方法?
      • 还没想到叫什么:请问一下如何动态的添加标签呢
      • 无星灬:你好,我想请问一下,在scrollable-tab-view中再放一个带navigation的视图组件会不会显示?
      • 2a3938be8c07:请问一下作者有遇到过react-native-scrollable-tab-view里面使用webview或者htmlview的吗?下面加载过来的view不滚动
      • 章鱼小丸子_7be1:首页图里面的官方demo是包里面的哪个例子呢,怎么找不到。。
      • 章鱼小丸子_7be1:如何支持左右滑动的时候切换view呢,并且能够将顶部的tab一起切换?
        zhuhf:@章鱼小丸子_7be1 没明白你的意思,效果图不是你说的么
      • fdc4101da6c6:我这个小白 感谢 你 , :smile:
      • HJXu:不错,感谢楼主的用心分享
      • 翻滚的前端程序员:这个tabbar可以放在左边吗,右边放view,上下滑动切换
      • d68c79e1e720:是那个进阶篇的demo
        zhuhf:@最是奢侈年少梦_ed3b tabLabel,文章最后
      • d68c79e1e720:大哥们报这个警告each child in an array or iterator should have a unique "key" prop
        那个key值应该在那加?你们谁知道
      • QinChBeSt:你好 安卓的页面不渲染 下面的条不动 怎么解决
      • 72bcb1dcef92:请问一下,安卓端页面还是不能被渲染吗
      • 399a4d709dad:安卓无效的问题如何解决了?
        下一站不是永远_dca0:老铁,就是显示空白的问题吗
        让我调戏一下:安卓下解决了吗
      • e5d90c227722:我想在这个tab第一页上加个轮播图 ,但是有滑动冲突问题,不知道应该如何解决,可以指教下吗?
      • ______MU:当tabBarPosition='bottom' 导航栏在底部的时候,能否像微信那样在tab上加一行浅浅的分隔?
      • Crapulence:lz没说每个切换页面的页面内容写在哪。并且我的DefaultTabBar和ScrollableTabBar一直给我报错。没法设置。
      • ca4aa7cf12fb:你好,楼主,我是自学的js,我想在他的内容页里面放入listView控件,需要怎么实现,我看了很多例子,但是就是没有在里面放控件的,只能放文字
      • 幻蝶恋影:在安卓手机,下面的横线,需要点击同一个按钮两次,采用对齐,
      • 989ade4ce3ba:你好。。。我碰到了一个问题,在第一个tab里面使用TextInput之后,当TextInput获取焦点的时候,tab会自动切换
      • 556c5caf23c1:我想问一下 我在view下做两部分 1、头部标题及返回,2、在1下面做了ScrollView包裹scrollable-tab-view ,scrollable-tab-view在itme 内部做了Listview 遍历数据 ,导致了Listview 不能顶动scrollable-tab-view 进行滑动,请问各位大神,如何解决
      • 幻蝶恋影:更新0.40出现白色空白
      • d55081fbf3b7:这个tab的选中下划线和两个标签下面那个灰色的线如何去掉?求赐教
        8937122f640e:tabBarUnderlineStyle={{backgroundColor: rgba(0,0,0,0)}}或者opacity: 0
      • 722516259d2d:react-native-scrollable-tab-view最新版本0.7.0,此属性在Android平台无效,具体表现为页面不会被“渲染”,但是iOS平台是没问题的。建议大家暂时使用0.6.0,作者表示已经准备修复此问题,我现在就是0.6.0的就是不能渲染,不知道\怎么回事
      • 722516259d2d:请问在安卓机上怎么实现,求指点,
      • bcf8efaf2852:可以设置TAB选中时的背景色吗?
      • 举子:ScrollableTabBar 采用这个模式 在iOS端不仅能左右滑动 还可以上下滑动是怎么回事?
        zhuhf:@举子 我这边测试了6,没发现这个现象
      • 黎曦清灱:慢慢学习
      • 56cdf3aae0e3:我设置默认选中第二页 给initialPage设置为1 tab是切换过去了,但是tab里面的内容没有显示出来,一片空白 不知道是bug 还是没设置好啊
        56cdf3aae0e3:@zhuhf 你有解决方案吗
        56cdf3aae0e3:默认就是0 0也可以
        zhuhf:@普通农民 0可以吗:sweat:
      • 幻蝶恋影:在安卓怎么不显示内容,只有标题栏
        幻蝶恋影:@吉安水痕 解决了
        722516259d2d:@普通农民 现在你解决了吗
        56cdf3aae0e3:@梦之遥海之蓝 我跟你一样的问题 孩没解决
      • 幻蝶恋影:DefaultTabBar可以修改高度吗
        chonglingliu:@yohanceli 直接设置style eg. style={{ height: 40 }}
        cf60ba48677b:同问,楼主解决了吗
      • 799ddb985663:可以设置单独 设置 tab 的宽度吗?而不是ScrollableTabView的宽度。
        mf168:你解决了吗
        zhuhf:一般是平分宽度,可以看下高级篇,自定义看下能否指定宽度,没试过
      • harvey_hui:楼主,怎么把设置DefaultTabBar和ScrollableTabBarTab选中时下方横线换成我自己的一张图片
        zheng小叶:@zhuhf 可以去掉下面那条线吗?属性是什么呢?
        harvey_hui: @hiphonezhu 好吧,但是我们的需求是需要换成图片来着,呵呵
        zhuhf:@harvey_hui tabBarUnderlineStyle,一般都是颜色
      • harvey_hui:多谢楼主分享
      • 7ff35fdfb50f:tabBarUnderlineColor是无效的,看了评论才知道,我以为是我哪里写错了, :sweat:
        改成:
        tabBarUnderlineStyle={{backgroundColor: '#FF0000'}}
        cf60ba48677b:哎,我也是被这个坑了,搞了好几天,都准备换控件了,今天无意中发现了
      • ebd7850242c1:楼主,我自己加了一个滑动的响应,当在第一个tab页手指向右滑动时出现一个我的个人信息页,类似QQ那样,但是现在与这个插件的滑动冲突了,第一个tab页不再响应向左滑动到第二个tab页,应该怎样阻止这种冲突呢
        咸湿仔灬:locked 属性
      • f8e5107ee6c8:楼主,首先谢谢你的分享,但是你的tabBarUnderlineColor这个属性是错的,
        我折腾了几个小时,查看源码之后发现是tabBarUnderlineStyle,并不是tabBarUnderlineColor,所以请立即更改,以免更多小伙伴入坑
        码农的思念:正确的是tabBarUnderlineStyle={{backgroundColor: '#1CA3F1'}}
        1f448c3e9823:你好 我也遇到了这个问题了 你的tabBarUnderlineStyle属性该怎么写 我试了几种都会报错
        zhuhf:@TrustTheBoy 确实,感谢指证
      • b562d54ab134:DefaultTabBar 设置 tabBarUnderlineColor 是无效的吗?
        zhuhf:@mu2__ 抱歉,应该是tabBarUnderlineStyle
        zhuhf:@mu2__ 有效果的,看看是不是和什么属性冲突了
      • 简翦儋箪:你好我问一下,比如说点击第一个按钮出现了一个页面 然后这个页面上有一个按钮,点击这个按钮会跳转到另外一个页面,这个按钮的点击事件跳转怎么写呢,用natigator.push 说找不到这个方法呢
        简翦儋箪:@YuRi_1 你只要把导航穿过去就可以了,这样就能获取到了
        简翦儋箪:@hiphonezhu 我看了 之前是没有问题的,是不是因为直接是用了这个插件,然后点击出现的页面没有push过去,所以这个页面上的按钮获取不到导航呢
        zhuhf:@简翦儋箪 http://www.jianshu.com/p/39250349a3ef 看下导航器的使用,
      • f814aa8301cc:你好这个插件里面,要是想在里面内容区插入内容怎么插入?
      • 8daa50c3832b:我想在这个tab第一页上加个轮播图 ,但是有滑动冲突问题,不知道应该如何解决,可以指教下吗?Android开发,刚刚学js
        e5d90c227722:@Liesbeth 你好,请问你解决这个问题了吗?
        西瓜太郎123: @晓晨DEV 把版本指定到0.6.0试试
        ebd7850242c1:@晓晨DEV 你好,请问你解决这个问题了吗?
      • 写耶:您好,我请问一下我如何把一个原生的iOSViewController放入其中的一个tab里面呢
        zhuhf:@写耶 知道了,这种情况可能只能用api接口,而不是它提供的默认ui了,或者这个页面完全用原生实现
        写耶:@hiphonezhu 大神因为我们要写一个把一个原生的融云加入到一个React-native项目中,也就是其中的一个tab(比方说,首页,消息,我的)消息就是融云的聊天好友列表页面……
        zhuhf:@写耶 这个做不到的,为何有这样的需求?
      • 你是禅:您好 我怎么设置了locked 无效呢 还是能滑动切换 其他属性到是好使
        咸湿仔灬:ios的locked 是无效的 android 有效 亲测 ,不知道有没有解决方法
        你是禅:@hiphonezhu 我这还是不行 刚才的代码显得太乱我就删除了 我再试试吧 我一会拿真机试一下 谢谢了
        zhuhf:@你是禅 方便贴一下代码吗
      • Jeavil_Tang:学习了:smile:
        zhuhf:@Jeavil_Tang 多多交流。
      • 谷蕙多谷粒:非常赞\(≧▽≦)/

      本文标题:[React Native]react-native-scrol

      本文链接:https://www.haomeiwen.com/subject/jkindttx.html