react-native - NavigatorIOS initialRoute コンポーネントのエクスポートの問題

Question

Facebook が提供する NavigatorIOS 用のサンプル コードを参照して、ルート ビューでナビゲーション バーを表示する単純なアプリを作成しました。NavigatorIOS はファイル App.js にインクルードされ、ルート ビューはファイル SearchCompnent.js に定義されています。

私に起こった問題は、SearchComponent が initialRoute コンポーネントとして NavigatorIOS にリンクされている場合に、エラーがスローされることです: Element type is invalid: expected a string or a class/function.... 同時に、単純に App に SearchComponent を含めると、 .js ページをロードします。私はこの問題に 1 週​​間以上悩まされていましたが、何の解決策も得られませんでした。コードは次のとおりです。

App.js

import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text, View, StyleSheet } from 'react-native';
import SearchComponent from './src/components/SearchComponent';

export default class App extends React.Component {
  render() {
    return (
        <NavigatorIOS style={styles.container} initialRoute = {{title: 'Search Property', component: SearchComponent }} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111111'
  },
});

SearchComponent.js

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

export default class SearchComponent extends Component {
  render() {
    return (
      <View style={styles.main}>
        <Text style={styles.title}>Search For Github User</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  }
});