【React Native】react-native-scrol

一张跟内容完全关系的图

介绍

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

添加到项目中

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

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

参考

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

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