重置主屏幕的导航堆栈（React Navigation和React Native）

我遇到了React Navigation和React Native的导航问题。这是关于重置导航并返回到主屏幕。重置主屏幕的导航堆栈（React Navigation和React Native）

我已经在DrawerNavigator内部构建了一个StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，导航堆栈的增长和增长。我不知道如何从堆栈中移除屏幕。

例如，当从主屏幕转到设置屏幕，然后转到输入屏幕并最后再次回到主屏幕时，主屏幕会在堆栈中两次。使用后退按钮，我不会退出应用程序，但会再次进入输入屏幕。

当再次选择主页按钮时，重置堆栈会很好，但我不知道该怎么做。 Here有人试图帮助其他人遇到类似问题，但解决方案对我无效。

const Stack = StackNavigator({ 
    Home: { 
    screen: Home 
    }, 
    Entry: { 
    screen: Entry 
    }, 
    Settings: { 
    screen: Settings 
    } 
}) 

export const Drawer = DrawerNavigator({ 
    Home: { 
    screen: Stack 
    }}, 
    { 
    contentComponent: HamburgerMenu 
    } 
)

这是抽屉屏幕

export default class HamburgerMenu extends Component { 
    render() { 
    return <ScrollView> 
     <Icon.Button 
     name={'home'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Home')}}> 
     <Text>{I18n.t('home')}</Text> 
     </Icon.Button> 

     <Icon.Button 
     name={'settings'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Settings')}}> 
     <Text>{I18n.t('settings')}</Text> 
     </Icon.Button> 

     <Icon.Button 
     name={'entry'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Entry')}}> 
     <Text>{I18n.t('entry')}</Text> 
     </Icon.Button> 
    </ScrollView> 
    } 
}

我希望你能帮助我的一个简单的例子。这是导航的重要组成部分，解决方案将非常棒！

来源

2017-03-29 Daniel

这是我要做的事：

reset(){ 
    return this.props 
       .navigation 
       .dispatch(NavigationActions.reset(
       { 
        index: 0, 
        actions: [ 
         NavigationActions.navigate({ routeName: 'Menu'}) 
        ] 
        })); 
    }

至少有 '家' 取代 '菜单'。您可能还想要将this.props.navigation改为您的实现。

来源

2017-03-30 14:49:05

产生一个令人讨厌的动画，大多数QA会拒绝fyi。 –

在这种情况下如何发送导航参数？ – Ashish

为了避免讨厌的动画，我不得不根据[这个答案]（https://stackoverflow.com/a/44332846/978369）完全禁用所有转换的动画。 – Kes115

在你的StackNavigator和DrawerNavigator中，你已经使用Home作为关键，并且我认为它必须是唯一的，这就是它创建问题的原因。您可以尝试用DrawerNavigator内的Stack替换Home吗？

希望这将有助于:)

来源

2017-03-29 13:39:10

感谢您的回答，但不幸的是没有任何改变。问题仍然存在。 – Daniel

我认为你应该使用TabNavigator而不是StackNavigator。你可以请尝试检查。 –

再次感谢您的回答，但我需要StackNavigator。 TabNavigator具有完全不同的行为并且没有标题栏。我需要重置StackNavigator堆栈，或者在导航器中没有双重屏幕。 – Daniel

要使用返回，您需要找到与路径关联的唯一键。在您的导航缩小器内部，您可以搜索现有状态以使用该路径在堆栈中查找第一条路径，并抓住其返回的关键字&。返回后，将导航到您提供的路径之前的屏幕。

let key; 

    if (action.payload) { 
    // find first key associated with the route 
    const route = action.payload; 

    const routeObj = state.routes.find((r) => r.routeName === route); 

    if (routeObj) { 
     key = { key: routeObj.key }; 
    } 
    } 

    return AppNavigator.router.getStateForAction(NavigationActions.back(key), state);

来源

2017-04-26 07:31:39 peterorum

这是我如何做到这一点：

import { NavigationActions } from 'react-navigation' 

this.props.navigation.dispatch(NavigationActions.reset({ 
    index: 0, 
    key: null, 
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })] 
}))

The important part is key: null .

那一抹栈，而导航从孩子导航到父导航。

做，如果你收到此错误：

对于动画，我用

// https://github.com/oblador/react-native-animatable 
import * as Animatable from 'react-native-animatable'

我只是控制所有的动画自己。把它们放在任何你想要的组件上，用<Animatable.View>包装它。

来源

2017-10-30 20:39:45 agm1984

谢谢！ 'key：null'就是我想念的东西:) – SubmittedDenied

重置主屏幕的导航堆栈（React Navigation和React Native）

回答

相关问题