反应本地TypeError：尝试分配给只读属性

Question

嗨，我是新来的反应本地人。启动应用程序时出现此错误：

"TypeError: Attempted to assign to readonly property.
This error is located at:
    in MyClass (at renderApplication.js:35)
    in RCTView (at View.js:112)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:112)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
stopTracking
    AnimatedValue.js:279:9
start
    AnimatedImplementation.js:188:4"

在此代码上。有人可以帮我吗？我找不到此代码有什么问题。我试图重新启动npm react native服务器，但仍无法正常工作。该应用程序只能将文本从一个位置转换到另一位置。

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';

// create a component
class MyClass extends Component {
  constructor(){
    super()
    this.animated = new Animated.Value(0);
  }
  componentDidMount() {
    Animated.timing(this.animated,{
      toValue:1,
      duration: 2000,
      }).start();
    }

  render() {
    const translateX = this.animated.interpolate({
      inputRange: [0,1],
      outputRange:[-500,1]
    });
    const transfrom = [{translateX}];
    return (
      <View>
      <Animated.Text style={[{transfrom}]}>
        Hello
      </Animated.Text>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50',
  },
});

//make this component available to the app
export default MyClass;

Answer 1

您拼写错误。

 render() {
   const translateX = this.animated.interpolate({
      inputRange: [0,1],
      outputRange:[-500,1]
    });
    const transfrom = [{translateX}];
    return (
       <View>
       <Animated.Text style={[{transfrom}]}>
       Hello
       </Animated.Text>
       </View>
   );

  }