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);