本机TypeError：尝试分配给readonly属性

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本机服务器，但它仍然无法正常工作。应用程序应该只将文本从一个位置转换为另一个位置。

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

  }