error: Attempted to assign to read only property on using Animated react native

Question

出于某种原因，我看不到我的代码有什么问题。我似乎正在使用 Animated 就像文档显示的那样，但这个错误不断出现。代码片段：

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

Answer 1

我认为这可能有效，您可以直接将值分配给返回运算符中的状态对象，这种情况下会出现错误

openDrawer() {
  let toValue
  this.setState({
    showNav: !this.state.showNav
  }) 
  toValue = (!this.state.showNav) ? 1 : 0 // change this this line case error
  Animated.timing( // Animate value over time
    this.anim, // The value to drive
    {
      toValue: 1, // Animate to final value of 1
      duration: 300,
    }
  ).start()
}

Answer 2

想通了。抛出此错误的两个原因。

我多次插入相同的值。这是不允许的。
设置状态会再次调用插值。这不是必需的。

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

Answer 3

可能对来自 Google 的其他人有用。请确保您在 Animated.View 等动画组件中使用动画值。 'upgrading' 动画视图时经常被忽视。

Answer 4

对于那些来到这里的人，你需要在<Animated.View>!

里面有动画值

参考这个问题： https://github.com/facebook/react-native/issues/10716#issuecomment-258098396

Answer 5

在我的例子中，我发现动画 transform: [{ scale: ...}] 值需要通过 style 属性而不是直接查看。

这是有效的，not-animated 我从以下代码开始：

<View transform={[{ scale: 0.8 }]}>
  ...
</View>

但这会引发 attempted to assign to read-only 属性 异常：

const animVal = useRef(new Animated.Value(0.8)).current
<Animated.View transform: { scale: animVal }>
  ...
</Animated.View>

这有效！：

const animVal = useRef(new Animated.Value(0.8)).current
<Animated.View style={{ transform: [{ scale: animVal }]}}>
  ...
</Animated.View>

（这不完全是问题持有人遇到的问题，但它可能会帮助其他通过 Google 偶然发现这个问题的人）

error: Attempted to assign to read only property on using Animated react native

error: Attempted to assign to read only property on using Animated react native

reactjs

react-native

react-animated