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绑定问题[期望组件类，获得对象对象]

回答

相关问题