Question

我在Udemy教程中的React Native中有以下代码，我正在关注。但是，当我尝试运行它时，我不断收到有关createClass的错误。我无法继续教程，因为这不会运行。我如何解决它？

var React = require('react-native');

var {
  Text,
  View,
  AppRegistry
} = React;

/*
var AppRegistry = React.AppRegistry;
var Text = React.Text;
var View = React.View;
// same as:
// var Text = React.Text;
// var View = React.View;
*/
var StopWatch = React.createClass({
  render: function() {


    return <View>
      <Text>
      00:00.00
      </Text>
      {this.startStopButon()}
      {this.lapButon()}
    </View>
  },
  startStopButon: function() {
    return <View>
    <Text>
      Start
    </Text>
    </View>
  },
  lapButon: function() {
    return <View>
    <Text>
      Lap
    </Text>
    </View>
  },

  }
});

/*
AppRegistry.registerComponent('stopwatch', function() {
  return StopWatch;
});
*/

AppRegistry.registerComponent('stopwatch', () => StopWatch);

Answer 1

我认为您使用的是最新的react-native版本。所以你需要使用es6类定义。

C类扩展了React.Component {render（）{return; }

    var React = require('react-native');

    var {
      Text,
      View,
      AppRegistry
    } = React;

    /*
    var AppRegistry = React.AppRegistry;
    var Text = React.Text;
    var View = React.View;
    // same as:
    // var Text = React.Text;
    // var View = React.View;
    */
export class StopWatch extends Component {  
      render () {


        return <View>
          <Text>
          00:00.00
          </Text>
          {this.startStopButon()}
          {this.lapButon()}
        </View>
      }
      startStopButon = () => {
        return <View>
        <Text>
          Start
        </Text>
        </View>
      }
      lapButon = () => {
        return <View>
        <Text>
          Lap
        </Text>
        </View>
      }

      }
    }

    /*
    AppRegistry.registerComponent('stopwatch', function() {
      return StopWatch;
    });
    */

    AppRegistry.registerComponent('stopwatch', () => StopWatch);

Answer 2

如果您没有任何版本问题，请将您的回复括在括号中

return( <View>
      <Text>
      00:00.00
      </Text>
      {this.startStopButon()}
      {this.lapButon()}
    </View>
  },
  startStopButon: function() {
    return <View>
    <Text>
      Start
    </Text>
    </View>
  },
  lapButon: function() {
    return <View>
    <Text>
      Lap
    </Text>
    </View>
);

React Native createClass无法正常工作

2 个答案: