javascript - React Native Tabbar iOS binding issue [Expected a component class, got object 对象]

Question

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

单击图标后，我希望应用程序显示相应的页面(home.ios.js 或 contact.ios.js)。但是，当我单击其中一个图标时，我收到“预期组件类，获得对象对象”错误。

到目前为止，TabBarIOS 组件的渲染看起来没问题。我自己认为是与其他.js文件的绑定(bind)有问题或者是注入(inject)有问题。

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 导入的