首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >更改TabNavigator时重置StackNavigator

更改TabNavigator时重置StackNavigator
EN

Stack Overflow用户
提问于 2017-11-13 20:36:57
回答 1查看 609关注 0票数 1

我有一个堆栈导航器的问题...我有两个导航

代码语言:javascript
复制
tabNavigator
    -> main
    -> stackNavigator
      -> page 1
      -> page 2

所以当我在第2页点击main (tabNavigator)我的stacknavigator重置到第1页时…

App.js

代码语言:javascript
复制
import React, { Component } from 'react';
import { Text, Button, View } from 'react-native';
import { TabNavigator, StackNavigator, NavigationActions} from 'react-navigation';

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'PageOne'})
  ]
})

class PageOneScreen extends Component {
  render() {
    return (<View><Text> PageOne </Text><Button title="next" onPress={() => this.props.navigation.navigate('PageTwo')} /></View>);
  }
}

class PageTwoScreen extends Component {
  render() {
    return (<View><Text> PageTwo </Text><Button title="reset" onPress={() => this.props.navigation.dispatch(resetAction)} /></View>);
  }
}

class MainScreen extends Component {
  render() {
    return (<Text> Main </Text>);
  }
}

const stackNav = StackNavigator({
  PageOne: {screen: PageOneScreen},
  PageTwo: {screen: PageTwoScreen}
});

const tabNav = TabNavigator({
  Main: {screen: MainScreen},
  Stack: {screen: stackNav}
});

export default tabNav;

但我没办法

EN

回答 1

Stack Overflow用户

发布于 2018-03-29 15:01:43

代码语言:javascript
复制
Use tabBarOnPress in tabNavigator which is a callback to handle tap events.
From the above code, add the navigationOption used by the Tab Navigator as coded below. Hope this will solve your problem

const tabNav = TabNavigator({
  Main: {screen: MainScreen},
  Stack: {
    screen: stackNav,
    navigationOptions: ({navigation}) => ({
            tabBarOnPress: (scene, jumpToIndex) => { 
                navigation.dispatch(
                    NavigationActions.navigate({
                        routeName: 'Stack', //which is your route to be reset
                        action: NavigationActions.reset({
                            index: 0,
                            actions: [
                                NavigationActions.navigate({ routeName: 'PageOne' }) //which is the default stack to be shown on pressing the tab
                            ]
                        })
                    })
                );
            }        
        })
  }
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47264532

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档