React Native Tabbar iOSバインディングの問題[コンポーネントクラスが必要なオブジェクトオブジェクトがあります]

Question

TabBarIOSコンポーネントを持つ単純なReactネイティブアプリがあります。 各タブごとに、個別の.jsファイルがあり、メインのTabBarIOSコンポーネントはindex.ios.jsにあります。他のクラスはhome.ios.jsとcontact.ios.jsです。

アイコンをクリックすると、対応するページ（home.ios.jsまたはcontact.ios.js）が表示されます。しかし、アイコンの1つをクリックすると、「期待されるコンポーネントクラス、オブジェクトオブジェクトが見つかりました」というエラーが表示されます。

これまでのところ、TabBarIOSコンポーネントのレンダリングは問題ないようです。私は自分自身が、他の.jsファイルとのバインディングや注入に関する問題に問題があると考えています。

index.ios.js

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

import Home from './home.ios'; 
import Contact from './contact.ios'; 

var { 
    AppRegistry, 
    TabBarIOS, 
} = ReactNative; 

var { 
    Component 
} = React; 


class Tab extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     selectedTab: 'Home' 
    }; 
} 

render() { 
    return (
     <TabBarIOS selectedTab={this.state.selectedTab}> 
      <TabBarIOS.Item 
       selected={this.state.selectedTab === 'Home'} 
       systemIcon="featured" 
       onPress={() => { 
        this.setState({ 
         selectedTab: 'Home', 
        }); 
       }}> 
       <home/> 
      </TabBarIOS.Item> 
      <TabBarIOS.Item 
       selected={this.state.selectedTab === 'Contact'} 
       systemIcon="contacts" 
       onPress={() => { 
        this.setState({ 
         selectedTab: 'Contact', 
        }); 
       }}> 
       <contact/> 
      </TabBarIOS.Item> 
     </TabBarIOS> 
    ) 
    } 
} 

AppRegistry.registerComponent('ProtoReactNative',() => Tab); 

home.ios.js

'use strict'; 

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

var { 
    StyleSheet, 
    View, 
    Text 
} = ReactNative; 

var { 
    Component 
} = React; 

var styles = StyleSheet.create({ 
    description: { 
     fontSize: 20, 
     textAlign: 'center', 
     color: '#FFFFFF' 
    }, 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: 'blue', 
    } 
}); 

class Home extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.description}> 
        Welcome to your React Native Start Component! 
       </Text> 
      </View> 
     ); 
    } 
} 

module.exports = Home; 

がうまくいけば、誰かがためのソリューションを持っている（私は、contact.ios.jsは同じに見えるだけで、この一つを含みます）私！ ありがとうございます！

EDIT：

'use strict'; 

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

var { 
    StyleSheet, 
} = ReactNative; 

var { 
    View, 
    Text, 
    Component 
} = React; 

var styles = StyleSheet.create({ 
    description: { 
     fontSize: 20, 
     textAlign: 'center', 
     color: '#FFFFFF' 
    }, 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: 'red', 
    } 
}); 

class Contact extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.description}> 
        This could be your second tab 
       </Text> 
      </View> 
     ); 
    } 
} 

module.exports = Contact; 

Answer 1

ステップ1：変更<home/><contact/>ステップ2

<Contact/>から<Home/>へと：接触のjsファイル、ビューとテキスト内部 ReactNativeからインポートする必要があります。エレメントタイプが無効です：：（コンポーネントでのビルドの）文字列または（複合コンポーネント用）クラス/機能を期待したが得た：現在、そのからの輸入は、残念ながら、これは動作しません、私は次のエラーを取得する