ios - React Native - super 表达式必须为 null 或函数，而不是未定义

Question

学习本教程 https://www.raywenderlich.com/126063/react-native-tutorial

我在 Hello World 阶段遇到以下错误:

2016-06-16 22:38:30.192 [error][tid:com.facebook.react.JavaScript] Super expression must either be null or a function, not undefined
2016-06-16 22:38:30.197 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Super expression must either be null or a function, not undefined
2016-06-16 22:38:32.059 [error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module.
2016-06-16 22:38:32.060 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Module AppRegistry is not a registered callable module.

index.ios.js 的完整代码是:

'use strict';

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

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  }
});

class PropertyFinderApp extends React.Component {
  render() {
    return React.createElement(React.Text, {style: styles.text}, "Hello World!");
  }
}

React.AppRegistry.registerComponent('PropertyFinder', function() { return PropertyFinderApp });

====更新

在博客的后面，它提到了使用一些更新的代码。但是，这也给我错误。具体来说，代码:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS
} from 'react-native';

var styles = StyleSheet.create({
text:
{
color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80
}
});

class PropertyFinderApp extends Component {
render() {
return "Hello World"
}
}

AppRegistry.registerComponent('PropertyFinder', function()
{
return PropertyFinderApp;
});

和错误:

2016-06-16 22:50:28.181 [info][tid:com.facebook.react.JavaScript] Running application "PropertyFinder" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2016-06-16 22:50:28.205 [error][tid:com.facebook.react.JavaScript] PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
2016-06-16 22:50:28.209 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

有什么建议我可能做错了吗？

Answer 1

第一个版本不起作用，因为您应该从 'react' 导入 Component，而不是从 not 'react-native'。

应该是这样的

var React = require('react');
var ReactNative = require('react-native');
var {
  Image,
  AppRegistry
  ScrollView,
  StyleSheet,
  Text,
  View,
} = ReactNative;

class PropertyFinderApp extends React.Component {
  render() {
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  }
}

AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp);

并且更新后的版本无法正常工作，因为您的 PropertyFinderApp 组件没有返回元素，它返回的是字符串，这是错误的。

这个

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
     NavigatorIOS
} from 'react-native';

class PropertyFinderApp extends Component {
    render() {
      return "Hello World" // You should return an element, not a String
    }
}

AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; });

应该是

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
     NavigatorIOS
} from 'react-native';

class PropertyFinderApp extends React.Component {
  render() {
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  }
}

AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; });