【React Native】react-native-scrollable-tab-view

一张跟内容完全关系的图

介绍

一个带有TabBar和可切换页面的控件。 在Android中可以看成是ViewPagerTabLayout的结合。 实际效果的话,就下面这样了。

官方的动图

你可以选择直接上官方Github了解怎么使用,或者继续往下看我装逼。

添加到项目中

npm install react-native-scrollable-tab-view --save

使用

基本用法

tabLabel指定Tab名称

render() {
    return (
        <ScrollableTabView>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

效果:

(怎么感觉比Android里面简单多了~~)

使用goToPage切换页面

render() {
    return (
        <ScrollableTabView
            ref={(tabView) => {
                this.tabView = tabView;
            }}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Button tabLabel='Tab 3' onPress={() => this.tabView.goToPage(0)}
                    title='GO to Tab 1'/>
        </ScrollableTabView>
    );
}

this.tabView.goToPage(0):跳转到第0页 (页面:0、1、2...)

Props

  • renderTabBar (Function:ReactComponent) TabBar的样式,可以使用官方提供的DefaultTabBar(默认)、ScrollableTabBar,也可以自定义。
render() {
    return (
        <ScrollableTabView
            renderTabBar={() => <DefaultTabBar/>}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

DefaultTabBar:自动分配水平方向的空间,空间不够时每个Tab会自动换行。 ScrollableTabBar:可以超过屏幕范围,滚动可以显示。

当然,我们还可以对他的样式进行调整。

    render() {
        return (
            <ScrollableTabView
                renderTabBar={() =>
                    <ScrollableTabBar style={{height: 40, borderWidth: 0, elevation: 2}}
                                      tabStyle={{height: 40}}/>}>
                ...
            </ScrollableTabView>
        );
    }

borderWidth:设置边框(感觉没什么用) elevation:层级效果(阴影) tabStyle:每个小TabStyle (修改style-height后,不改变tabStyle-height会导致TabBar内容不居中)

  • tabBarPosition (String) TabBar的位置。top(default)、bottomoverlayTop(顶部、悬浮在内容视图之上)、overlayBottom(底部、悬浮在内容视图之上)
render() {
    return (
        <ScrollableTabView
            tabBarPosition='top'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

效果的话你一个个去试吧~~

  • onChangeTab (Function) 页面改变监听。回调函数中有一个Object类型的参数,包含两个keyi(当前选中页面的下标)、ref(被选中的Tab对象)
render() {
    return (
        <ScrollableTabView
            onChangeTab={(obj) => {
                console.log('current index : ' + obj.i)
            }}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • onScroll (Function) 滑动监听。回调函数中有一个float类型的参数,表示滑动的偏移。 如:当前页面和下个页面的中间值 例: page0->page1 :0 -> 0.2 -> 0.3 ... 1 ; page2->page3: 2->2.1->2.2->2.3 ... 3
render() {
    return (
        <ScrollableTabView
            onScroll={(position) => {
                console.log('position : ' + position)
            }}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

从page0滑动到page1时打印的结果:

page0->page1

  • locked (Bool) 阻止滑动,默认为false。设置成true后,只能通过点击Tab来切换页面。
render() {
    return (
        <ScrollableTabView
            locked={false}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • initialPage (Integer) 默认选择的页面,默认为0。
render() {
    return (
        <ScrollableTabView
            initialPage={1}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • page (Integer) 我也不知道干嘛用的,官方给了这样的介绍 set selected tab(can be buggy see #126
  • tabBarUnderlineStyle (View.propTypes.style) TabBar指示器的样式
    render() {
        return (
            <ScrollableTabView
                tabBarUnderlineStyle={{backgroundColor:'#000000', height:1}}>
                <Text tabLabel='Tab 1'>Tab 1</Text>
                <Text tabLabel='Tab 2'>Tab 2</Text>
                <Text tabLabel='Tab 3'>Tab 3</Text>
            </ScrollableTabView>
        );
    }
  • tabBarBackgroundColor (String) TabBar背景色
render() {
    return (
        <ScrollableTabView
            tabBarBackgroundColor='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • tabBarActiveTextColor (String) Tab选中时的文字颜色
render() {
    return (
        <ScrollableTabView
            tabBarActiveTextColor='#000000'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • tabBarInactiveTextColor (String) Tab未选中时的文字颜色
render() {
    return (
        <ScrollableTabView
            tabBarInactiveTextColor='#666666'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • tabBarTextStyle (Object) TabBar文字样式
tabBarTextStyle={fontFamily: 'Roboto', fontSize: 15} 

怎么用????

  • scrollWithoutAnimation (Bool) 是否不显示指示条的左右移动的动画,默认`false
render() {
    return (
        <ScrollableTabView
            scrollWithoutAnimation={true}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}
  • prerenderingSiblingsNumber (Integer) 预渲染当前页面相邻页面数量,默认为0。若设置为1,预渲染当前页左右共两个页面。 (类似android中ViewPager 的setOffscreenPageLimit(int arg0);)
render() {
    return (
        <ScrollableTabView
            prerenderingSiblingsNumber={3}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

在完全显示页面前(滑动的过程中),默认是不渲染View的。只有完全切换到当前页面时,才开始渲染选中的View。 例:第一次page0->page1,当page1未完全显示时。page1还未开始渲染,是个空页面。

参考

react-native-scrollable-tab-view [React Native]react-native-scrollable-tab-view(入门篇)

以上有错误之处,感谢指出

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android视图绘制流程完全解析,带你一步步深入了解View(二)

在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧。那么本篇文章中,我们将继续对View进...

37380
来自专栏田超学前端

微信小程序开发:canvas 多行文字换行(二)

微信小程序开发中,canvas画出一篇文章,由于句子长短不一,画起来确实是费劲,查了不少资料,总结一下:

59570
来自专栏一“技”之长

Bootstrap响应式前端框架笔记八——按钮组

    在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处...

11620
来自专栏从零开始的linux

html入门

基本网页构成 <!doctype html> <html> <head> <title>This is the Title of the Page</ti...

36350
来自专栏黑泽君的专栏

day02_css学习笔记

9520
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

36360
来自专栏我的博客

安卓开发之简单组件使用

一、TextView组件(文本框) <TextView android:id=”@+id/firstText” android:text=”第一行“ andro...

29560
来自专栏编程直播室

Canvas的HelloWorld文本的样式文本的测量总结

27260
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

9050
来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

37550

扫码关注云+社区

领取腾讯云代金券