android - React Native Undefined 不是一个函数

Question

我正在关注 iOS 的 React Native 教程：https ://www.raywenderlich.com/126063/react-native-tutorial

由于 React-Native 中的 Android 教程缺乏，我试图将上面的 iOS 链接传输到 Android，但错误显示为：

我改为NavigatorIOS内Navigator联：

'use strict';
//var React = require('react-native');

import React, {
  AppRegistry,
  Component,
  Navigator,
  Image,
  ListView,
  StyleSheet,
  Text,
  View
} from 'react-native';
var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1
  }
});


class HelloWorld extends React.Component {
  render() {
    return <React.Text style={styles.text}>Hello World (Again)</React.Text>;    
  }
}


class PropertyFinderApp extends React.Component {
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{
          title: 'Property Finder',
          component: HelloWorld,
        }}
      />
    );
  }
}

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

我对 React-Native 比较陌生，如何缓解这种情况？

Answer 1

NavigatorIOS 是一个（顾名思义）iOs-only 组件，具有与 Navigator 组件不同的 API。顺便说一下，Navigator 组件是 React Native 团队官方支持的组件，所以这可能是您无论如何都应该尝试使用的组件。

有关更多信息，请比较https://facebook.github.io/react-native/docs/navigatorios.html和 https://facebook.github.io/react-native/docs/navigator.html

回到您的工作示例，您需要将 renderScene 道具添加到您的 Navigator 组件。我还更改了 initialRoute，因此它有一个要在 renderScene 方法中识别的键（在我看来，它比传递组件更干净）。

<Navigator
    style={styles.container}
    initialRoute={{
      title: 'Property Finder',
      component: 'HelloWorld',
    }}
    renderScene ={this._renderScene.bind(this)}
  />

然后添加 _renderScene 方法：

_renderScene(route, navigator) {
    if (route.component == 'HelloWorld') {
      return <HelloWorld />
    }
    // return a default homescreen or something when the route is not matched
   return <Home />
}