社区首页 >专栏 >【React Native】react-native-scrollable-tab-view

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

Gavin-ZYX

发布于 2018-05-18 07:31:29

2.8K00

代码可运行

文章被收录于专栏：Android开发与分享Android开发与分享

运行总次数：0

代码可运行

一张跟内容完全关系的图

介绍

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

官方的动图

你可以选择直接上官方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：每个小Tab的Style （修改style-height后，不改变tabStyle-height会导致TabBar内容不居中）

tabBarPosition (String) TabBar的位置。top（default）、bottom、overlayTop（顶部、悬浮在内容视图之上）、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类型的参数，包含两个key：i（当前选中页面的下标）、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>
    );
}