我已经观察到了后面的按钮逻辑作品,可以看到堆栈中的屏幕序列。我有一个放置在堆栈导航器中的抽屉导航器。
在堆栈的顶部,我溅出了屏幕。在仪表板上,当我按下返回按钮时,我需要飞溅屏幕。
输入应用程序后,如何从堆栈中删除Splash屏幕,因此,当我按下返回按钮仪表板时,它将退出应用程序而不是启动屏幕。
/* @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>;
最简单的解决方案之一是,将当前屏幕替换为新屏幕,因此不允许用户回去。
const SplashScreen: () => {
...
navigation.replace("LoginScreen"); // Move forward and Remove this screen from stack
请参阅https://reactnavigation.org/docs/stack-actions/#replace
一种解决方案是将堆栈重置在飞溅屏幕组件内,然后将用户重定向到您喜欢的屏幕:
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);
链接到官方文档
在 react-navigation 5.x 版本中。如果要打开新屏幕并删除以前的堆栈屏幕,则可以写入: -
navigation.dispatch(StackActions.replace('screen_name', {params: {}}));
替换操作允许在导航状态中替换路由。您可以将其导入: -
import { StackActions } from '@react-navigation/native';
如果要在堆栈导航上执行其他操作,请查看此链接 - https://reaectnavigation.org/docs/stack-actions
我使用此
解决了它代码:
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 },
});
};
另外,如果您需要深入说明代码,请在此处观看此简短视频
useEffect(() => {
setTimeout(() => {
navigation.reset({
index:0,
routes:[
{
name:"Welcome",
// params:{key:'param'},
},
],
});
}, 1000);},[]);
您也可以触发此onpress,例如:
onPress={()=>navigation.reset({
index:0,
routes:[
{
name:"NameOfScreen",
// params:{key:'param'},
},
],
})}