From 8b77464c0bd82bca9befdbe42932ec93906898d3 Mon Sep 17 00:00:00 2001
From: jasonhuang <jasonhuang@hyx.com>
Date: Thu, 30 Apr 2020 15:54:49 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(location)=20:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=A4=9A=E6=AC=A1render=E5=AF=BC=E8=87=B4tab=E6=A0=8F=E4=B8=8B?=
 =?UTF-8?q?=E5=88=92=E7=BA=BF=E5=8A=A8=E7=94=BB=E4=B8=8D=E6=B5=81=E7=95=85?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

if (activeTab ) {
...

  componentDidUpdate() {
    // resolve the probleme that when our component render many times ,inkTabBarNode's animation is not smoothly.
    componentDidUpdate(this, false, prevProps);
  }

======>

if (activeTab && (!prevProps || activeKey !== prevProps.activeKey)) {
...

  componentDidUpdate() {
    componentDidUpdate(this);
  }
---
 src/InkTabBarNode.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/InkTabBarNode.js b/src/InkTabBarNode.js
index f60eddd6..9af2088d 100644
--- a/src/InkTabBarNode.js
+++ b/src/InkTabBarNode.js
@@ -9,7 +9,7 @@ import {
   getActiveIndex,
 } from './utils';
 
-function componentDidUpdate(component, init) {
+function componentDidUpdate(component, init, prevProps) {
   const { styles, panels, activeKey, direction } = component.props;
   const rootNode = component.props.getRef('root');
   const wrapNode = component.props.getRef('nav') || rootNode;
@@ -22,7 +22,9 @@ function componentDidUpdate(component, init) {
     // prevent mount animation
     inkBarNodeStyle.display = 'none';
   }
-  if (activeTab) {
+  // !prevProps || activeKey !== prevProps.activeKey条件为了防止多次设置同样的activeKey会导致动画重复,不流畅的问题.如点击tab进行三次render,下划线会三次闪顿再回到目标tab
+  // In order to prevent the problem that setting the same activeKey for many times.And it will cause animation to not smoothly.For example, if you click the tab once, and it will render three times.Then,the underline will flash three times and back to final position
+  if (activeTab && (!prevProps || activeKey !== prevProps.activeKey)) {
     const tabNode = activeTab;
     const transformSupported = isTransform3dSupported(inkBarNodeStyle);
 
@@ -95,7 +97,8 @@ export default class InkTabBarNode extends React.Component {
   }
 
   componentDidUpdate() {
-    componentDidUpdate(this);
+    // resolve the probleme that when our component render many times ,inkTabBarNode's animation is not smoothly.
+    componentDidUpdate(this, false, prevProps);
   }
 
   componentWillUnmount() {

From edf6cf04cdbd164904d3ad18eb7a49d7fdcdd506 Mon Sep 17 00:00:00 2001
From: jasonhuang <jasonhuang@hyx.com>
Date: Thu, 30 Apr 2020 16:15:38 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix(location)=20:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=A4=9A=E6=AC=A1render=E5=AF=BC=E8=87=B4tab=E6=A0=8F=E4=B8=8B?=
 =?UTF-8?q?=E5=88=92=E7=BA=BF=E5=8A=A8=E7=94=BB=E4=B8=8D=E6=B5=81=E7=95=85?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

if (activeTab ) {

}
...

componentDidUpdate() {
	componentDidUpdate(this);
}

======>
// 多添加个判断条件,重复的activeKey不设置动画
if (activeTab && (!prevProps || activeKey !== prevProps.activeKey)) {

}
...

componentDidUpdate(prevProps) {
	// resolve the probleme that when our component render many times ,inkTabBarNode's animation is not smoothly.
	componentDidUpdate(this, false, prevProps);
}
---
 src/InkTabBarNode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/InkTabBarNode.js b/src/InkTabBarNode.js
index 9af2088d..88f9ed28 100644
--- a/src/InkTabBarNode.js
+++ b/src/InkTabBarNode.js
@@ -96,7 +96,7 @@ export default class InkTabBarNode extends React.Component {
     }, 0);
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     // resolve the probleme that when our component render many times ,inkTabBarNode's animation is not smoothly.
     componentDidUpdate(this, false, prevProps);
   }