react-native-scrollable-tab-view自定义TabBar样式

最新推荐文章于 2025-08-30 16:54:26 发布

原创

最新推荐文章于 2025-08-30 16:54:26 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

# #自定义样式 #插件常用属性

本文介绍了如何在React-Native中自定义ScrollableTabView的TabBar样式，包括引入自定义TabBar、DefaultTabBar和ScrollableTabBar的特性，以及各种属性的详细说明，如tabBarPosition、onChangeTab、locked等，帮助开发者实现个性化的Tab导航效果。

导入插件：

 npm install react-native-scrollable-tab-view --save
 
 ====>
      "react-native-scrollable-tab-view": "^0.8.0"

页面引用：

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

先引用系统提供了两种默认样式：

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

效果：
在这里插入图片描述

<ScrollableTabView
    renderTabBar={() => <DefaultTabBar/>}>
           {
               label2.map((item, index) => {
                   return (
                       <View tabLabel={item} key={index} style={
  
  {flex:1,backgroundColor:'#fff',alignItems:'center',justifyContent:'center'}}>
                           <Text>{item}</Text>
                           <Text>{'DefaultTabBar'}</Text>
                       </View>
                   )
               })
           }
</ScrollableTabView>

在这里插入图片描述

<ScrollableTabView
     renderTabBar={() => <ScrollableTabBar/>}>
         {
             label1.map((item, index) => {
                 return (
                     <View tabLabel={item} key={index} style={
  
  {flex:1,backgroundColor:'#fff',alignItems:'center',justifyContent:'center'}}>
                         <Text>{item}</Text>
                         <Text>{'ScrollableTabBar'}</Text>
                     </View>
                 )
             })
         }
</ScrollableTabView>

自定义TabBar样式：
在这里插入图片描述
//引入自定义tabbar样式

  import SegmentTabBar from '../../components/segmentTabBar';

   <ScrollableTabView
          renderTabBar={() => <SegmentTabBar />}
          tabBarBackgroundColor='#3671ff'
          tabBarActiveTextColor='#fff'
           tabBarInactiveTextColor='#fff'>
           {
               label2.map((item, index) => {
                   return (
                       <View tabLabel={item} key={index} style={
  
  {flex:1,backgroundColor:'#fff',alignItems:'center',justifyContent:'center'}}>
                           <Text>{item}</Text>
                           <Text>{'自定义TabBar'}</Text>
                       </View>
                   )
               })
           }
        </ScrollableTabView>

segmentTabBar.js

/**
 * 创建： jiaojiao on 2018/10/29.
 * 功能：SegmentTabBar
 */
import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
const PhoneWidth = Dimensions.get('window').width;
const Button = (props) => {
    return (
        <TouchableOpacity {...props} activeOpacity={0.95}>
            {props.children}
        </TouchableOpacity>
    )
};
export default class SegmentTabBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }
    renderTab(name, page, isTabActive, onPressHandler) {
        const textColor = isTabActive ? '#0086E5' : '#fff';
        const backgroundColor = isTabActive ? '#fff' : '#9bb8ff';
        console.log(textColor)
        return <Button
            style={
  
  {flex: 1, height: 25, backgroundColor}}
            key={name}
            accessible={true}
            accessibilityLabel={name}
            accessibilityTraits='button'
            onPress={() => onPressHandler(page)}
        >
            <View style={[style

最低0.47元/天解锁文章