错误:在使用Animated react native时尝试分配为只读属性 [英] error: Attempted to assign to read only property on using Animated react native

问题描述

由于某种原因，我看不到自己的代码做错了什么.正如文档显示的那样，我似乎正在使用Animated，但是此错误不断出现. 代码段:

For some reason I'm not able to see what I'm doing wrong with my code. I seem to be using Animated just as the documentation shows but this error keeps coming. The code snippet:

import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Image,
  Animated,
} from 'react-native'
import Header from './../components/Header'


export default class DrawerShell extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showNav: false,
    }
    this.anim = new Animated.Value(0)
    this.openDrawer = this.openDrawer.bind(this)
  }
  openDrawer() {
    let toValue
    this.setState({
      showNav: !this.state.showNav
    }) !this.state.showNav ? toValue = 1 : toValue = 0
    Animated.timing( // Animate value over time
      this.anim, // The value to drive
      {
        toValue: 1, // Animate to final value of 1
        duration: 300,
      }
    ).start()
  }
  render() {
    let {
      showNav
    } = this.state
    return ( <
      Animated.View style = {
        [
          styles.appContainer,
          {
            transform: [{
                translate: [
                  this.anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 200],
                  }),
                  this.anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 80],
                  }),
                  0
                ]
              },
              {
                scale: this.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [1, 0.7]
                })
              }
            ]
          },
        ]
      } >
      <
      Image source = {
        {
          uri: "splash_bg"
        }
      }
      style = {
        styles.bgImage
      } >
      <
      Header title = "hi there"
      onPress = {
        this.openDrawer
      }
      /> <
      /Image> 
     </Animated.View>
    );
  }
}

推荐答案

如图.引发此错误的两个原因.

Figured. Two reasons why this error was being thrown.

1. 我多次插值相同的值.这是不允许的.
2. 设置状态将再次调用插值.不需要.

一旦我停止对同一个值进行多次插值并使其独立于状态，错误就会消失.

Once I Stopped doing interpolate multiple times on the same value and made it independent of state, the error went away.

这篇关于错误:在使用Animated react native时尝试分配为只读属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！