React Native通用Tab组件react-native-scrollable-tab-view初探

react-native-scrollable-tab-view 简介

同时适配 Android & iOS

开源项目地址：https://github.com/skv-headless/react-native-scrollable-tab-view

组件安装

npm i react-native-scrollable-tab-view --save --force

组件使用

import ScrollableTabView from 'react-native-scrollable-tab-view';

属性及方法介绍

tabLabel

每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字

renderTabBar

renderTabBar={() => <DefaultTabBar/>}

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar，也可以自定义。

• DefaultTabBar：Tab会平分在水平方向的空间
• ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示

tabBarPosition

位置默认为'top'

tabBarPosition='top' ['top','bottom','overlayTop','overlayBottom']

onChangeTab

Tab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数

• i：被选中的Tab的下标（从0开始）
• ref：被选中的Tab对象（基本用不到）

onScroll

视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是 [0, tab数量-1]

locked

表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。

initialPage

初始化时被选中的Tab下标，默认是0（即第一页）

page(Integer)

设置选中指定的Tab，作者打算废除

children(ReactComponents)

表示所有子视图的数组

tabBarUnderlineStyle(View.propTypes.style)

设置 DefaultTabBar 和 ScrollableTabBarTab 选中时下方横线的样式

tabBarBackgroundColor(String)

设置整个Tab栏的背景颜色

tabBarActiveTextColor(String)

设置选中Tab的文字颜色

tabBarInactiveTextColor(String)

设置未选中Tab的文字颜色

tabBarTextStyle(Object)

设置Tab文字的样式，比如字号、字体等

style(View.propTypes.style)

系统View都拥有的属性

contentProps(Object)

react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。

scrollWithoutAnimation(Bool，默认为false)

设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）这个属性的设置对滑动视图切换的动画效果没有影响，仅仅对“点击”Tab效果有作用

prerenderingSiblingsNumber(Integer，默认为0)

预渲染附件视图的个数 为0只渲染当前页

范例源码

index.android.js & index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';

class RNAPP extends Component {
    render() {
        return (
            <ScrollableTabView
                renderTabBar={() => <ScrollableTabBar/>}
                tabBarPosition='overlayTop'

                onChangeTab={
                    (obj)=>{
                        console.log('被选中的tab下标：' + obj.i);
                    }
                }

                onScroll={
                    (position)=>{
                        console.log('滑动位置：' + position);
                    }
                }
                locked={false}
                initialPage={0}
                tabBarUnderlineStyle={{backgroundColor: '#3BC1FF'}}
                tabBarActiveTextColor='#3BC1FF'
                tabBarTextStyle={{fontSize:14}}
                prerenderingSiblingsNumber={1}
                >
                <View tabLabel="RNAPP.CC" style={styles.center}>
                    <Text >内容：RNAPP.CC</Text>
                </View>
                <View tabLabel="ReactNative" style={styles.center}>
                    <Text >内容：ReactNative</Text>
                </View>
                <View tabLabel="Android" style={styles.center}>
                    <Text >内容：Android</Text>
                </View>
                <View tabLabel="iOS" style={styles.center}>
                    <Text >内容：iOS</Text>
                </View>
                <View tabLabel="APP开发" style={styles.center}>
                    <Text >内容：APP开发</Text>
                </View>
            </ScrollableTabView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    center: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);