From 3c9fd77cd176daf94f260fc66ef339858a771bce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BD=9C=E5=8D=8E?= <zhangzuohua@sunlands.com>
Date: Tue, 29 Oct 2019 19:03:41 +0800
Subject: [PATCH] enhace scrollableTabbar make it support unLineWidth.

---
 ScrollableTabBar.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/ScrollableTabBar.js b/ScrollableTabBar.js
index 5db37937..eeb13d3d 100644
--- a/ScrollableTabBar.js
+++ b/ScrollableTabBar.js
@@ -158,11 +158,19 @@ const ScrollableTabBar = createReactClass({
       backgroundColor: 'navy',
       bottom: 0,
     };
-
-    const dynamicTabUnderline = {
-      left: this.state._leftTabUnderline,
-      width: this.state._widthTabUnderline,
-    };
+      const {
+          underlineStyle: { width }
+      } = this.props;
+      const underLineWidth = width || 20;
+      const dynamicTabUnderline = {
+          left: this.state._leftTabUnderline,
+          width: this.state._widthTabUnderline
+        };
+      let fixUnderLine = {};
+      fixUnderLine = {
+        left: Animated.add(dynamicTabUnderline.left,Animated.divide(Animated.add(dynamicTabUnderline.width,new Animated.Value(-underLineWidth)),2)),
+          width: new Animated.Value(underLineWidth)
+        };
 
     return <View
       style={[styles.container, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}
@@ -187,7 +195,7 @@ const ScrollableTabBar = createReactClass({
             const renderTab = this.props.renderTab || this.renderTab;
             return renderTab(name, page, isTabActive, this.props.goToPage, this.measureTab.bind(this, page));
           })}
-          <Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, this.props.underlineStyle, ]} />
+          <Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, this.props.underlineStyle,fixUnderLine ]} />
         </View>
       </ScrollView>
     </View>;