React Native - 未定义不是一个对象（评估 'singleValue.stopTracking'）

Question

我正在尝试通过 item.id 在 flatlist 中单独播放动画。到目前为止，我可以绑定 id 并在单击动画时提醒正确的 id。不幸的是，动画没有播放，我得到这个错误 Undefined is not an object (evaluating 'singleValue.stopTracking')。

    anim_star = (id) => {
  Alert.alert(id);
  this.setState({ progress: new Animated.Value(id) });
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();
 }

收集 id 并应播放选择了 id 的动画。

   data={ this.state.dataSource}

   ItemSeparatorComponent = {this.FlatListItemSeparator}


   renderItem={({item}) => <View>


   <Card>


     <View rkCardFooter>
     <TouchableOpacity
     onPress={this.anim_star.bind(this, item.id)}
      style={{position:'absolute',  height: '100%', width: '100%',}}>
      <Animation
      progress={this.state.progress[item.id]}
      source={require('../Animations/favourite_app_icon.json')}
      style={{ height: '100%', width: '100%', position: 'absolute'}}
      resizeMode="contain"
      />
      </TouchableOpacity>

       <Text> Sample</Text>

     </View>

   </Card>

显示有多少类别的动画。

最后，这是我的道具和状态的样子：

    constructor(props)
{

  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: new Animated.Value(0),
};

我检查了其他来源，但我仍然不知道为什么会发生此错误或我做错了什么。我想也许如果我将 progress 更改为 id 那么这将触发动画单独播放，但这远非正确。

Answer 1

编辑：

我会尝试像这样更改 anim_star：

anim_star = (id) => {
  Alert.alert(id);
  let progress = this.state.progress; <---
  progress[id] = new Animated.Value(0); <---
  this.setState({ progress }); <---
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
  }).start();
 }

在你的构造函数中：

constructor(props)
{
  super(props);

  this.state = {
  isLoading: true,
  id: '',
  dataSource: '',
  progress: {}, <---
};

您的平面列表正在渲染的每个组件都应该有自己的状态和动画逻辑。此外，您必须在渲染方法中为您希望设置动画的组件使用特殊标签，以及分配您希望设置动画的特定状态属性作为组件样式对象上的值。

例如，如果您希望改变不透明度，您渲染的组件将类似于：

render() { return( <Animated.Image style={{ height: '100%', width: '100%', position: 'absolute', opacity: this.state.progress}} source={require('../Animations/favourite_app_icon.json')} resizeMode={`contain`} /> ) }

~~带有动画值的状态声明和 Animated.timing() 方法看起来不错；他们只需要移动到您的平面列表正在渲染的子组件。~~

Answer 2

当你的 Animated.timing 函数中的第一个参数不是 new Animated.Value(0) 时会发生这种情况，在你的情况下它是 this.state.progress[id] 我猜这是导致错误的原因

React Native - 未定义不是一个对象（评估 'singleValue.stopTracking'）

React Native - Undefined is not an object (evaluating 'singleValue.stopTracking')

reactjs

react-native

lottie