javascript - React Native reset to in nested navigators -


i'm building app tabview looks :

enter image description here

the code following :

tabview.js

resettotab(index, opts) {   var selected = this.state.selected;   this.setstate({selected: index});    this.refs.tabs.jumpto(this.refs.tabs.state.routestack[index]);    this.props.ontab(index); };  renderscene = (tab, navigator) => {   return (     <navigator       style={{backgroundcolor: '#ffffff'}}       initialroute={tab.component.route()}       ref="views"       renderscene={(route, nav) => {         return react.createelement(route.component, _.extend({navigator: nav}, route.passprops));       }}       configurescene={() => {         return {           ...navigator.sceneconfigs.fadeandroid,           defaulttransitionvelocity: 1000,           gestures: {}         };       }} />   ); };  render() {   return (    <view style={styles.tabbarcontainer}>         <navigator         style={{backgroundcolor: '#ffffff'}}         initialroutestack={this.props.tabs}         initialroute={this.props.tabs[this.props.initialselected || 0]}         ref="tabs"         key="navigator"         renderscene={this.renderscene}         configurescene={() => {           return {             ...navigator.sceneconfigs.fadeandroid,             defaulttransitionvelocity: 10000,             gestures: {}           };         }} />        {this.state.showtabbar ? [                 <view key="tabbar" style={styles.tabbartabs}>             {_.map(this.props.tabs, (tab, index) => {             return this.rendertab(index, tab.name, tab.icon, tab.pastille, tab.hasshared);             })}         </view>       ] : []}     </view>   ); }; 

main.js

render() {   return (     <view style={{flex: 1}}>       <tabview          ref="tabs"         ontab={(tab) => {           this.setstate({tab});         }}         tabs={[           {             component: liste,             name: 'découvrir',             icon: require('../assets/img/tabs/icons/home.png')           },           {             component: friends,             name: 'amis',             icon: require('../assets/img/tabs/icons/friend.png'),             pastille: this.state.friendspastille < 10 ? this.state.friendspastille : '9+'           },           {             component: recostep1,             icon: require('../assets/img/tabs/icons/add.png'),             hasshared: mestore.getstate().me.has_shared           },           {             component: notifs,             name: 'notifs',             icon: require('../assets/img/tabs/icons/notif.png'),             pastille: this.state.notifspastille < 10 ? this.state.notifspastille : '9+'           },           {             component: profil,             name: 'profil',             icon: require('../assets/img/tabs/icons/account.png')           }         ]}         initialskipcache={!!this.notiflaunchtab}         initialselected={this.notiflaunchtab || 0}         tabsblocked={false} />     </view>   ); }; 

only, when tapping on bottom menu items, jump correct route navigator in render scene not reset first view. i've tried access this.refs.views it's undefined. when resettotab called, i'd able this.refs.views.resetto(this.props.tabs[selected].component.route()) this.refs.views undefined. i'm pretty stuck on one.


Comments