gpt4 book ai didi

React-native:返回到堆栈中的特定屏幕

转载 作者:行者123 更新时间:2023-12-04 05:23:28 25 4
gpt4 key购买 nike

这是根导航器

export const AppNavigator = StackNavigator({
Splash: { screen: Splash },
Dashboard: { screen: DashboardDrawer }
});

const DashboardDrawer = DrawerNavigator({ DashboardScreen: {
screen: StackNavigator({
A: { screen: A },
B: { screen: B },
C: { screen: C },
D: { screen: D },
}
}, {
contentComponent: DashboardDrawerComponent,
drawerWidth: 280
});

我的堆栈中有 4 个屏幕 - A、B、C、D。
我想从 D 跳到 A。(或 D 跳到任何屏幕)
我引用了以下 react 导航文档- https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back

上面的文档。指出要从屏幕 D 转到屏幕 A(弹出 D、C 和 B),您需要提供一个键才能返回,在我的情况下为 B,如下所示
navigation.goBack(SCREEN_KEY_B)

所以,我的问题是 我应该从哪里获得特定屏幕的 key ?
我检查了我的根导航对象,它向我显示了每个屏幕的一些动态生成的键。 如何为屏幕指定我自己的键?

最佳答案

这很棘手!

我引用了react-navigation文档的这一节,已经实现了上面的内容!
https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions

这就是如何,

1. 在问题中稍微改变了我的 DrawerNavigator(以适应以下 stacknavigator)

const DrawerStackNavigator = new StackNavigator({
A: { screen: A },
B: { screen: B },
C: { screen: C },
D: { screen: D },
}
});

const DashboardDrawer = DrawerNavigator({
DashboardScreen: DrawerStackNavigator,
}, {
contentComponent: DashboardDrawerComponent,
drawerWidth: 280
});

2. 在屏幕 D 中调度一个 Action
const {navigation} = this.props;
navigation.dispatch({
routeName: 'A',
type: 'GoToRoute',
});

3. 在我的堆栈导航器上听了这个 Action
const defaultGetStateForAction = DrawerStackNavigator.router.getStateForAction;
DrawerStackNavigator.router.getStateForAction = (action, state) => {
if (state && action.type === 'GoToRoute') {
let index = state.routes.findIndex((item) => {
return item.routeName === action.routeName
});
const routes = state.routes.slice(0, index+1);
return {
routes,
index
};
}
return defaultGetStateForAction(action, state);
};

关于React-native:返回到堆栈中的特定屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46607156/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com