Javascript Resact Native Animations singleValue.stopTracking不是一个函数

我尝试实现一个滑动条，并将滑动动画绑定到一个

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.rctexceptionmanagerqueue]未处理的JS异常：singleValue.stopTracking不是一个函数。（在“singleValue.stopTracking（）”中，“singleValue.stopTracking”未定义）

滑块的布局为：

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

---

我做错什么了吗？

您确定您所在州的

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

从“React”导入React；
进口{
有生气的
评估学，
缓和,，
样式表，
文本，
可触摸不透明度，
看法
}从“反应本机”；
类MyApp扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onPress=this.onPress.bind（this）；
此.state={
滑块位置：新的动画值（0）
}
}
新闻界（活动）{
动画。计时（this.state.sliderPosition{
toValue:202.5，
持续时间：100，
放松：放松，线性，
}).start（）；
}
render（）{
返回(
让它充满活力
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
幻灯片容器：{
位置：'绝对'，
top:138，
左:0,，
右:0,，
身高:5,，
背景颜色：“#E15668”，
阴影半径：1，
阴影不透明度：0.5，
阴影颜色：“灰色”，
阴影偏移：{宽度：0，高度：2}，
不透明度：0.9
},
滑块：{
玛金托普：0，
背景颜色：“#FCC31B”，
宽度：120，
身高:5,，
}
});
AppRegistry.registerComponent（'MyApp'，（）=>MyApp）；

Hi，谢谢回复。我非常确定sliderPosition是Animated.Value的一个实例。我把mu代码放在这里，它工作得很好

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