React Native Tabbar iOS綁定問題[期望組件類，獲得對象對象]

我有一個簡單的帶有TabBarIOS組件的React Native應用程序。對於每個選項卡，我有一個獨立的.js文件，主TabBarIOS組件位於index.ios.js中。其他類是home.ios.js和contact.ios.js。React Native Tabbar iOS綁定問題[期望組件類，獲得對象對象]

當我點擊一個圖標後，我希望應用程序顯示相應的頁面（home.ios.js或contact.ios.js）。但是，當我單擊其中一個圖標時，出現「預期組件類，得到對象對象」錯誤。

到目前爲止，它看起來像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（包括我只有這一個，contact.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;

希望有人有一個解決方案我！在此先感謝！

編輯：

'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;

來源

2016-10-18 RSSD

步驟1：更改<home/>到<Home/>和<contact/>到<Contact/>

第2步：在內部接觸js文件，查看和文本應該從ReactNative進口。目前它的進口從反應

來源

2016-10-18 14:05:40 Jickson

不幸的是，這不起作用，我得到以下錯誤：元素類型無效：期望一個字符串未定義。檢查'Contact'的渲染方法。 – RSSD

問題在裏面聯繫js文件。如果您發佈該文件的代碼 – Jickson

我已更新代碼 – RSSD

React Native Tabbar iOS綁定問題[期望組件類，獲得對象對象]

回答

相關問題