重置主屏幕的導航堆棧（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）

回答

相關問題