反応ネイティブのTabBarの複数のコンポーネント/クラスでエラーが発生しましたか？

Question

私のリアクションがネイティブなアプリでは、TabBarを実装して、各タブの選択時にさまざまなコンポーネント（それぞれ独自のクラスで定義されています）をロードしようとしています。しかし、私は現在、このエラーが発生しています： "私はTabBar上のタブを選択しようとすると、" onlyChildはちょうど1つの子と子供を渡す必要があります "。

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> 
     ); 
    }, 
}); 

EDIT：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

に何も表示していない可能性があります。 ONE View〜

これはTabBarIOSを実装する方法です。

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} /> 
    ) 
}, 

などの機能を通じて、個々のビューをレンダリング -

内のすべてのビュー -

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

の名前を含むオブジェクトは、次のように、何かをする方法をレンダリング

戻るReact Nativeに初めて行ったとき、私はサンプルアプリケーションを作成しました。疑問を解決するにはthisファイルを見てください。