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

【问题标题】：React Native - Undefined is not an object (evaluating 'singleValue.stopTracking')React Native - 未定义不是对象（评估'singleValue.stopTracking'）
【发布时间】：2021-08-12 02:18:43
【问题描述】：

我正在尝试通过item.id 在flatlist 中单独播放动画。到目前为止，我能够绑定 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，那么这将触发动画单独播放，但这远非正确。

【问题讨论】：

标签： reactjs react-native lottie

【解决方案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 值的状态声明和 Animated.timing() 方法看起来不错；他们只需要移动到您的平面列表正在呈现的子组件。

【讨论】：

我试过了，但错误仍然存在，动画也不再可见。 @vm909
您要为哪种样式属性设置动画？你想要什么效果？
动画本身是有效的，只是当我点击动画时，所有东西都同时动画。我只想触发一个动画，而不是所有动画。
哦！在 anim_star 中，尝试将 this.setState({ progress: new Animated.Value(id) }) 更改为： this.setState({ progress[id]: new Animated.Value(0) })
我想我知道问题所在了。现在，您的进度字段是一个 Animated.Value。您要做的是为每个正在渲染的项目实例化一个离散的 Animated.Value 。因此，您可能希望将构造函数中的进度字段更改为空对象。这样，当您稍后引用 progress[id] 时，它指的是一个名为 progress 的状态对象上以给定 id 命名的字段。

【解决方案2】：

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

【讨论】：