optimize animations

README.md

@@ -22,6 +22,7 @@ To run example on Android:
 ```
 react-native run-android
 ```
+**Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.**
 
 # Documentation
 The document is being written, please refer to the example source code.

components/SegmentedBar/SegmentedBar.js

@@ -112,19 +112,30 @@ export default class SegmentedBar extends Component {
 
   updateIndicator() {
     if (!this._indicatorX || !this._indicatorWidth) return;
+
+    let indicatorXValue = this.indicatorXValue;
+    let indicatorWidthValue = this.indicatorWidthValue;
+    if (indicatorXValue === this._saveIndicatorXValue
+        && indicatorWidthValue === this._saveIndicatorWidthValue) {
+      return;
+    }
+
+    this._saveIndicatorXValue = indicatorXValue;
+    this._saveIndicatorWidthValue = indicatorWidthValue;
     if (this.props.animated) {
       Animated.parallel([
-        Animated.spring(this._indicatorX, {toValue: this.indicatorXValue, friction: 9}),
-        Animated.spring(this._indicatorWidth, {toValue: this.indicatorWidthValue, friction: 9}),
+        Animated.spring(this._indicatorX, {toValue: indicatorXValue, friction: 9}),
+        Animated.spring(this._indicatorWidth, {toValue: indicatorWidthValue, friction: 9}),
       ]).start();
     } else {
-      this._indicatorX.setValue(this.indicatorXValue)
-      this._indicatorWidth.setValue(this.indicatorWidthValue)
+      this._indicatorX.setValue(indicatorXValue)
+      this._indicatorWidth.setValue(indicatorWidthValue)
     }
+
     if (this.props.autoScroll && this.refs.scrollView) {
       let contextWidth = 0;
       this._buttonsLayout.map(item => contextWidth += item.width);
-      let x = this.indicatorXValue + this.indicatorWidthValue / 2 - this._scrollViewWidth / 2;
+      let x = indicatorXValue + indicatorWidthValue / 2 - this._scrollViewWidth / 2;
       if (x < 0) {
         x = 0;
       } else if (x > contextWidth - this._scrollViewWidth) {

components/SegmentedBar/SegmentedItem.js

@@ -8,7 +8,7 @@ import {View, Text} from 'react-native';
 import Theme from 'teaset/themes/Theme';
 import Badge from '../Badge/Badge';
 
-export default class SegmentedItem extends View {
+export default class SegmentedItem extends Component {
 
   static propTypes = {
     ...View.propTypes,
@@ -91,6 +91,6 @@ export default class SegmentedItem extends View {
   render() {
     this.buildProps();
 
-    return super.render();
+    return <View {...this.props} />;
   }
 }

docs/cn/README.md

@@ -60,6 +60,7 @@ react-native run-ios
 ```
 react-native run-android
 ```
+**提示：在 Android 下运行示例程序时，部分动画效果不太流畅，打包为 release 包运行即可解决，在 release 模式下运行非常流畅。**
 
 # 文档
 中文文档已编写完成, 暂时没时间编写英文文档, 如果你乐意为 Teaset 贡献力量, 欢迎 PR。