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

第一个版本无效，因为您应该从Component导入'react'，而不是从'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组件未返回元素，因此更新后的版本无法正常工作，它返回了一个String，这是错误的。

此

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

Answer 2

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

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

2 个答案: