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

React Native Animations singleValue.stopTracking不是一个函数

1 个答案: