【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 条评论
登录 后参与评论

相关文章

来自专栏编程直播室

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

2586
来自专栏我就是马云飞

仿bilibili刷新按钮的实现

简述 最近跟小伙伴一起讨论了一下,决定一起仿一个BiliBili的app(包括android端和iOS端),我们并没有打算把这个项目完全做完,毕竟我们的重点是掌...

2288
来自专栏我的博客

安卓开发之简单组件使用

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

2776
来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

2767
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

2285
来自专栏十月梦想

css选择器

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

755
来自专栏肖洒的博客

前端入门学习--HTML

写在前面。 前端知识真的还是比较有用的。一直要把前端的学习提上日程,因为各种事情各种拖延,写爬虫的时候也是捎带学习前端的东西,还是需要系统的了解下。 All ...

1943
来自专栏黑泽君的专栏

day01_html学习笔记

1511
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

2469
来自专栏郭霖

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

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

3418

扫码关注云+社区