react-native-scrollable-tab-view

react-native-scrollable-tab-view

加载库

npm install react-native-scrollable-tab-view --save
import ScrollableTabView from 'react-native-scrollable-tab-view';

属性

• 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：可以超过屏幕范围，滚动可以显示

• tabBarPosition(String)
  TabBar的位置。top(默认)、bottom、overlayTop(顶部，悬浮在内容视图之上)、overlayBottom(底部，悬浮在内容视图之上)

• onChangeTab(Function)
  页面改变监听。回调函数中有一个Object类型的参数，包含两个key：i(当前选中页面的下标)，ref(被选中的Tab对象)。

• onScroll(Function)
  滑动监听。回调函数中有一个Float类型的参数，表示滑动的偏移。

• locked(Bool)
  阻止滑动，默认为false。设置成true后，只能通过点击Tab来切换页面

• initialPage (Integer)
  默认选择的页面，默认为0

• page (Integer)
  它实际上是currentPage，因为它对变化作出反应

• tabBarUnderlineStyle
  默认标签栏的下划线样式

• tabBarBackgroundColor(String)
  默认标签栏背景的颜色，默认为白色

• tabBarActiveTextColor(String)
  被选中状态下，标签栏文本的颜色

• tabBarInactiveTextColor(String)
  非选中状态下，标签栏文本的颜色

• tabBarTextStyle(Object)
  标签栏文本的其他样式

• scrollWithoutAnimation(Bool)
  在选项卡按下更改选项卡没有动画

自定义TabBar

export default class HomeTabBar extends Component {

    static propTypes = {
        goToPage: PropTypes.func, // 跳转到对应tab的方法
        activeTab: PropTypes.number, // 当前被选中的tab的下标
        tabNames: PropTypes.array, // 保存tab名称
        tabIconNames: PropTypes.array // 保存tab图标
    };

    render() {
        return (
            <View style={styles.tabs}>
                {/* 遍历，系统会提供一个tab和下标，调用一个自定义的方法 */}
                {this.props.tabNames.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    };

    renderTabOption = (tab, i) => {
        // 判断i是否是当前选中的tab，设置不同的颜色
        let color = this.props.activeTab === i ? mainColor : C2;
        return (
            <TouchableOpacity
                style={styles.tab}
                activeOpacity={0.7}
                onPress={() => this.props.goToPage(i)}
                key={tab === undefined ? 'tab' : tab.toString()}>

                <View style={styles.tabItem}>
                    <Icon
                        name={this.props.tabIconNames[i]}
                        size={27}
                        color={color}/>
                    <Text style={{color: color, fontSize: 12, marginTop: 1}}>
                        {this.props.tabNames[i]}
                    </Text>
                </View>

            </TouchableOpacity>
        );
    };

}