在嵌套导航器中将本机重置为React

时间:2016-01-29 08:52:45

标签: javascript ios react-native

我目前正在构建一个带有tabview的应用程序,如下所示:

enter image description here

代码如下:

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

仅在点击底部菜单项时,我会跳回到正确的路线,但渲染场景中的导航器不会重置为第一个视图。我已尝试访问this.refs.views,但未定义。调用resetToTab时,我希望能够执行仅this.refs.views.resetTo(this.props.tabs[selected].component.route())之类的操作,this.refs.views未定义。我非常坚持这个。

0 个答案:

没有答案