React Native Tabbar iOS 绑定问题 [期望一个组件类，得到对象 Object]

Question

我有一个带有 TabBarIOS 组件的简单 React Native 应用程序。 对于每个选项卡，我都有一个单独的 .js 文件，主 TabBarIOS 组件位于 index.ios.js 中。其他类是 home.ios.js 和 contact.ios.js。

单击图标后，我希望应用程序显示相应的页面（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;

Answer 1

第 1 步：将 <home/> 更改为 <Home/> 并将 <contact/> 更改为 <Contact/>

第 2 步：在联系人 js 文件中，View 和 Text 应从 ReactNative 导入。目前它从 React

导入