javascript - react native TypeError : Attempted to assign to readonly property

Question

嗨，我是 React Native 的新手。启动应用程序时出现此错误:

"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 server 但它仍然无法正常工作。该应用程序应仅将文本从一个位置转换到另一个位置。

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

你拼错了 transform。

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

  }