在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文件以清除任何疑問。