ScrollableTabView

可滑动的分段组件，基于开源的react-native-scrollable-tab-view组件改写。

Author: qingguo.xu

Install

qnpm install @qnpm/react-native-ui-scrollable-tab-view

Props

Prop Type Default Required Description
tabBarPosition PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom']) 'top' No 导航栏的位置
page number 0 No 当前展示的页面
useOriginScrollViewIOS boolean false No IOS下，是否使用原生的 ScrollView，默认使用的是qunar-react-native
onChangeTab function (obj) => {} 页面改变时执行的回调函数，接受一个对象参数 obj.i: 当前激活的页数，obj.form: 前一页，obj.ref: 当前页的引用
onScroll function (offset) => {} 滑动页面时执行的回调函数，接受一个浮点数参数 offset: 滑动页面在当前的视图内的偏移占比
renderTabBar function () => <DefaultTabBar /> No 组件标签栏的渲染函数
contentProps object {} No 给根组件 ScrollView(IOS) 或 ViewPagerAndroid 组件增加的属性。谨慎使用，可能会覆盖组件默认的一些属性。
scrollWithoutAnimation boolean false No 点击导航栏页面切换是否有动画过渡效果
disabled boolean false No 组件是否不可用
prerenderingSiblingsNumber number 0 No 预渲染的当前页面的相邻兄弟元素个数
style View.props.style 组件根节点的样式对象
sceneContainerStyle View.props.style 内容数组节点的根样式
tabBarBackgroundColor string '' 导航栏的背景色
tabBarTextStyle Text.props.style 导航栏字体样式
tabBarActiveTextColor string 'navy' 激活状态下导航栏的字体颜色
tabBarInactiveTextColor string 'black' 默认状态下导航栏的字体颜色
tabBarUnderlineStyle View.propTypes.style 导航栏下划线样式

Example:

import React,  { Component } from 'react';
import { Text } from 'react-native';
import ScrollableTabView, { ScrollableTabBar } from '@qnpm/react-native-ui-scrollable-tab-view';

class Demo extends Component {
    render() {
        return (
            <ScrollableTabView
                style={{ marginTop: 20 }}
                page={2}
                renderTabBar={() => <ScrollableTabBar />}
            >
                {[
                    <Text tabLabel='去哪儿网' key={0}>去哪儿网 tab contents</Text>,
                    <Text tabLabel='平台事业部' key={1}>平台事业部 tab contents </Text>,
                    <Text tabLabel='前端架构组' key={2}>前端架构组 tab contents</Text>,
                ]}
            </ScrollableTabView>
        );
    }
}

module.exports = {
    title: 'ScrollableTabView',
    examples: [{
        render: () => {
            return (<Demo />)
        }
    }]
};
Rating
SliderMenu