從堆棧導航器中刪除屏幕

Question

我觀察到后退按鈕邏輯可以看到堆棧中的屏幕序列。 我在堆棧導航器中放置了一個抽屜導航器。

在堆棧頂部，我有啟動畫面。 在儀表板上，當我按下后退按鈕時，我會進入閃屏。

進入應用程序后如何從堆棧中刪除啟動畫面，因此當我按下后退按鈕儀表板時，它將退出應用程序而不是進入啟動畫面。

/* @flow */

import React from "react";
import { Platform, Text } from "react-native";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator} from "react-navigation";
import Register from "./components/Register";
import Available from "./components/Available";
import Splash from "./components/splash/“;
import SideBar from "./components/sidebar";
import Discover from "./components/Discover/";
import Dashboard from "./components/Dashboard/";
import Contact from "./components/Contact"



const Drawer = DrawerNavigator(
  {
    Dashboard: { screen: Dashboard },
    Discover: { screen: Discover },
    Contact: { screen: Contact},
      },
  {
    navigationOptions: {
      gesturesEnabled: false,
    },
   initialRouteName: "Dashboard",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    drawerPosition: 'right',
    contentComponent: props => <SideBar {...props} />
  }
);


const AppNavigator = StackNavigator(
    {
      Splash: { screen: Splash },
      Drawer: { screen: Drawer },                           
      Available: { screen: Available },
        Register: { screen: Register },
    },
    {
       //  initialRouteName: “Splash”,
         headerMode: "none",
    }
);

export default () =>
    <Root>
        <AppNavigator />
    </Root>;

Answer 1

一種解決方案是重置初始屏幕組件內的堆棧並將用戶重定向到您喜歡的屏幕：

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Drawer'})
  ]
})
this.props.navigation.dispatch(resetAction)

對於較新版本的react-navigation ：

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

官方文檔鏈接

Answer 2

我用這個解決了

代碼：

const prevGetStateForActionHomeStack = HomeStack.router.getStateForAction;
HomeStack.router = {
  ...HomeStack.router,
  getStateForAction(action, state) {
    if (state && action.type === 'ReplaceCurrentScreen') {
      const routes = state.routes.slice(0, state.routes.length - 1);
      routes.push(action);
      return {
        ...state,
        routes,
        index: routes.length - 1,
      };
    }
    return prevGetStateForActionHomeStack(action, state);
  },
};
replaceScreen = () => {
  const { locations, position } = this.props.navigation.state.params;
  this.props.navigation.dispatch({
    key: 'NearMeMap',
    type: 'ReplaceCurrentScreen',
    routeName: 'NearMeMap',
    params: { locations, position },
  });
};

另外，如果您需要對代碼進行深入解釋，請在此處觀看此短視頻

Answer 3

在react-navigation 5.x版本中。 如果要打開新屏幕並刪除以前的堆棧屏幕，可以編寫：-

navigation.dispatch(StackActions.replace('screen_name', {params: {}}));

替換操作允許替換導航狀態下的路線。 您可以將其導入為：-

import { StackActions } from '@react-navigation/native';

如果您想在堆棧導航上執行其他操作，請查看此鏈接 - https://reactnavigation.org/docs/stack-actions

Answer 4

useEffect(() => {
setTimeout(() => {
  navigation.reset({
    index:0,
    routes:[
      {
        name:"Welcome",
      //  params:{key:'param'},
      },
    ],
  });
}, 1000);},[]);

您還可以觸發 this onPress ，例如：

onPress={()=>navigation.reset({
    index:0,
    routes:[
      {
        name:"NameOfScreen",
      //  params:{key:'param'},
      },
    ],
  })}

Answer 5

最簡單的解決方案之一是，用新屏幕替換當前屏幕，這樣用戶就不會被允許返回。

const SplashScreen: () => {
    ...
  navigation.replace("LoginScreen"); // Move forward and Remove this screen from stack

見https://reactnavigation.org/docs/stack-actions/#replace