react-native - Animated.View 和 Animated.Value 抛出只读赋值或不可变对象错误

Question

我有一个我认为非常简单的 Animated.View 和 Animated.Value 用法来控制滑动打开菜单栏的位置。我试图将 Animated.timing() 放在构造函数 componentWillMount、componentDidMount; 这些选项都没有奏效。打击配置的错误是：Attempted to assign readonly property

如果我将 Animated.timing() 移动到构造函数，我得到：you attempted to set the key on an object that is meant to be immutable.

这是我当前的代码：

import React, { Component } from 'react'
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Easing,
} from 'react-native'
import _style from '../../masterStyle'

export default class Nav extends Component {
  constructor(props){
    super(props);
    this.state = {
      navPosition: new Animated.Value(-230)
    };

    Animated.timing(this.state.navPosition, {
      toValue: 0,
      easing: Easing.back(),
    }).start(()=>{
      console.log("did start")
    });

  }

  componentDidMount(){
  }

  render(){
    return (
      <Animated.View style={style.navWrap}>
        <TouchableOpacity style={style.navMask} onPress={this.props.hide}>{}</TouchableOpacity>
        <ScrollView style={[style.menuWrap,{right: this.state.navPosition}]}>
          <Text style={_style.h2}>{}</Text>
        </ScrollView>
      </Animated.View>
    )
  }
}

const style = StyleSheet.create({
  navWrap: {
    flex: 1,
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    right: 0,
    zIndex: 10,
  },
  navMask: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: '100%',
    height: '100%',
    backgroundColor: '#000',
    opacity: 0.8,
  },
  menuWrap: {
    position: 'absolute',
    flex: 1,
    width: 230,
    height: '100%',
    paddingTop: 0,
    backgroundColor: 'white',
    zIndex: 11,
    borderWidth: 0,
    borderColor: 'red',
    borderTopWidth: 60,
    borderTopColor: '#123357'
  },
  menuCloseIcon: {
    fontSize:30,
    fontWeight:'100',
    color: '#979797'
  },
});