在react-native中有多个TabBar组件/类的错误？

Question

在我的react-native应用程序中，我实现了一个TabBar，现在我打算在选择每个选项卡时加载各种组件（每个组件都在其自己的类中定义）。然而，我目前得到这个错误：“当我尝试在TabBar上选择一个选项卡时，onlyChild必须传递一个具有一个孩子的孩子”。

var Create = require('./Create'); 
var Feed = require('./Feed'); 

var Icon = require('react-native-vector-icons/Ionicons'); 

var HomePage = React.createClass({ 

    render: function() { 
     return (
      <TabBarIOS 
       tintColor="white" 
       barTintColor="darkslateblue"> 
      <Icon.TabBarItemIOS 
       title="FEED" 
       iconName="ios-star" 
       selectedIconName="ios-star" 
       selected={this.state.selectedTab === 'feed'} 
       onPress={() => { 
        this.setState({ 
        selectedTab: 'feed', 
        }); 
       }}> 
      </Icon.TabBarItemIOS> 
      <Icon.TabBarItemIOS 
       title="CREATE" 
       selected={this.state.selectedTab === 'create'} 
       iconName="ios-person" 
       selectedIconName="ios-person" 
       onPress={() => { 
        this.setState({ 
         selectedTab: 'greenTab', 
        }); 
       }}> 
      </Icon.TabBarItemIOS> 
     </TabBarIOS> 
     ); 
    }, 
}); 

编辑：包括Feed.js：

var React = require('react-native'); 
var { 
    StyleSheet, 
    View, 
    Text, 
    Component 
} = React; 

var styles = StyleSheet.create({ 
    description: { 
     fontSize: 20, 
     textAlign: 'center', 
     color: '#FFFFFF' 
    } 
}); 

class Feed extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.description}> 
        Feed page! 
       </Text> 
      </View> 
     ); 
    } 
} 

module.exports = Feed; 

我不能确定是什么原因造成这个错误，也就是不知道这是去从不同的加载各种部件的正确方法文件。任何有识之士将不胜感激。

Answer 1

您会收到此错误，可能是因为您没有提供任何视图给。 你必须提供一个View到

这是我如何实现TabBarIOS。

包含的所有则须─

var TABS = { 
    upcoming: 'upcoming', 
    search: 'search', 
    popular: 'popular', 
    watchlist: 'watchlist', 
    logout: 'logout' 
} 

而且内部名称的对象渲染方法，这样的事情 -

render: function(){ 
     _this=this; 
     return(
       <TabBarIOS translucent={true}> 
        <Icon.TabBarItem 
         title="Upcoming" 
         iconName="arrow-graph-up-right" 
         selectedIconName="arrow-graph-up-right" 
         onPress={()=>this.setState({selectedTab: TABS.upcoming})} 
         selected={this.state.selectedTab === TABS.upcoming} 
        > 
         {this._renderHome()} 
        </Icon.TabBarItem> 
        <Icon.TabBarItem 
         title="Search" 
         iconName="ios-search" 
         selectedIconName="ios-search-strong" 
         onPress={()=>this.setState({selectedTab: TABS.search})} 
         selected={this.state.selectedTab === TABS.search} 
        > 
         {this._renderSearch()} 
        </Icon.TabBarItem>     
        <Icon.TabBarItem 
         title="Popular" 
         iconName="android-star-outline" 
         selectedIconName="android-star" 
         onPress={()=>this.setState({selectedTab: TABS.popular})} 
         selected={this.state.selectedTab === TABS.popular} 
        > 
         {this._renderPopular()} 
        </Icon.TabBarItem> 
        <Icon.TabBarItem 
         title="Watchlist" 
         iconName="ios-list-outline" 
         selectedIconName="ios-list" 
         onPress={()=>this.setState({selectedTab: TABS.watchlist})} 
         selected={this.state.selectedTab === TABS.watchlist} 
        > 
         {this._renderBlank('Your Watchlist')} 
        </Icon.TabBarItem> 
        <Icon.TabBarItem 
         title="Logout" 
         iconName="log-out" 
         selectedIconName="log-out" 
         onPress={this._logout} 
         selected={this.state.selectedTab === TABS.logout} 
        > 
        </Icon.TabBarItem>     
       </TabBarIOS> 
     ) 
    }, 

然后渲染功能，通过这样的单

_renderHome: function(){ 
    return(
     <HomeView navigator={this.props.navigator} /> 
    ) 
}, 

个人观点

回到我刚接触React Native时，我创建了一个示例应用程序。看看this文件以清除任何疑问。