React Native Animations singleValue.stopTracking不是一個函數

Question

我嘗試實現一個滑動條並將滑動動畫綁定到TouchableOpacity 。 我將參數初始化為sliderPosition: new Animated.Value(0) ，onPress函數為：

  onPress: function(event){
    Animated.timing(this.state.sliderPosition, {
      toValue: 202.5, 
      duration: 100,
      easing: Easing.linear, 
    }).start();
  },

我一直收到這個錯誤

[tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: singleValue.stopTracking is not a function. (In 'singleValue.stopTracking()', 'singleValue.stopTracking' is undefined)

滑塊的布局為：

    <View style = {styles.sliderContainer}>
      <Animated.View style = {[styles.slider, {marginLeft:this.state.sliderPosition}]}>
      </Animated.View>
    </View>

款式：

sliderContainer: {
  position: 'absolute',
  top: 138,
  left: 0,
  right: 0,
  height: 5,
  backgroundColor: '#E15668',
  shadowRadius: 1,
  shadowOpacity: 0.5,
  shadowColor: 'gray',
  shadowOffset: {width: 0, height: 2},
  opacity: 0.9
},
slider: {
  marginTop: 0,
  backgroundColor: '#FCC31B',
  width: 120,
  height: 5,
},

我做錯什么了嗎？

Answer 1

您確定狀態上的sliderPosition屬性仍然是Animated.Value的實例嗎？ 您遇到的那個錯誤說明了這個問題。 這是一個使用您的代碼段的完整示例，它可以按預期工作。 嘗試一下，如果該片段不能幫助您解決問題，請發布更多周圍的代碼，以提供更多上下文：

import React from 'react';
import {
  Animated,
  AppRegistry,
  Easing,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.onPress = this.onPress.bind(this);

    this.state = {
      sliderPosition: new Animated.Value(0)
    }
  }

  onPress(event){
    Animated.timing(this.state.sliderPosition, {
      toValue: 202.5, 
      duration: 100,
      easing: Easing.linear, 
    }).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onPress}>
          <Text>Animate It</Text>
        </TouchableOpacity>

        <View style = {styles.sliderContainer}>
          <Animated.View style = {[styles.slider, {marginLeft:this.state.sliderPosition}]}>
          </Animated.View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  sliderContainer: {
    position: 'absolute',
    top: 138,
    left: 0,
    right: 0,
    height: 5,
    backgroundColor: '#E15668',
    shadowRadius: 1,
    shadowOpacity: 0.5,
    shadowColor: 'gray',
    shadowOffset: {width: 0, height: 2},
    opacity: 0.9
  },

  slider: {
    marginTop: 0,
    backgroundColor: '#FCC31B',
    width: 120,
    height: 5,
  }
});

AppRegistry.registerComponent('MyApp', () => MyApp);