Question

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

tabNavigator
    -> main
    -> stackNavigator
      -> page 1
      -> page 2

所以我希望当我在第2页上，然后点击main（tabNavigator），我的stacknavigator重置为第1页......

App.js

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;

但我不管理

Answer 1

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

更改TabNavigator时重置StackNavigator

1 个答案: