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

导入插件：

 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={[styles.tab]}>
                <Text sty