Ошибка с несколькими компонентами/классами для TabBar в native-native?

Question

В моем приложении, основанном на реакции, я внедрил TabBar и теперь нацелен на то, чтобы различные компоненты (каждый из которых определялся в своих классах) загружались при выборе каждой вкладки. Однако в настоящее время я получаю эту ошибку: «onlyChild должен быть передан детям с одним ребенком», когда я пытаюсь выбрать вкладку TabBar.

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

Вы получаете эту ошибку, вероятно, потому, что у вас нет никакого представления о . Вы должны предоставить ОДИН View к

Это, как я бы реализовать TabBarIOS.

Объект, содержащий имена всех views-

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, чтобы устранить любые сомнения.