javascript - Error with multiple components/classes for TabBar in react-native? -
in react-native app, have implemented tabbar , aiming have various components (each defined in own classes) load upon selection of each tab. however, i'm getting error: "onlychild must passed children 1 child", when try select tab on 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: including 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; i can't determine causing error , not sure if right way go loading various components different files. insight highly appreciated.
you getting error because not providing view tabbaritemios. you have provide 1 view tabbaritemios
this how i'd implement tabbarios.
an object containing names of views-
var tabs = { upcoming: 'upcoming', search: 'search', popular: 'popular', watchlist: 'watchlist', logout: 'logout' } and inside render method, -
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> ) }, and render individual views through functions one-
_renderhome: function(){ return( <homeview navigator={this.props.navigator} /> ) }, back when new react native, had created sample app. take @ this file clear doubts.
Comments
Post a Comment