Fehler mit mehreren Komponenten/Klassen für TabBar in reaktionsnativen?

Question

In meiner reaktionsnativen App habe ich eine TabBar implementiert und strebe nun an, dass verschiedene Komponenten (die jeweils in ihren eigenen Klassen definiert sind) auf die Auswahl jedes Tabs geladen werden. Allerdings erhalte ich gerade diesen Fehler: "onlyChild muss ein Kind mit genau einem Kind übergeben", wenn ich versuche, einen Tab auf der TabBar auszuwählen.

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: Einschließlich 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; 

Ich kann nicht feststellen, was diesen Fehler verursacht und ist auch nicht sicher, ob dies der richtige Weg ist, verschiedene Komponenten unterschiedlicher geht zum Laden Dateien. Jeder Einblick würde sehr geschätzt werden.

Answer 1

Sie erhalten diesen Fehler wahrscheinlich, weil Sie keine Sicht auf bieten. Sie müssen ONE bieten View zu

Dies ist, wie ich TabBarIOS implementieren würde.

Ein Objekt Namen aller Aufrufe-

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

enthalten machen und innerhalb Methode, so etwas wie dieses -

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

Und dann machen einzelne Ansichten durch Funktionen wie das Ein-

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

Als ich neu zu React Native war, hatte ich eine Beispiel-App erstellt. Werfen Sie einen Blick auf this Datei, um Zweifel zu beseitigen.