javascript - React Navigation,如何返回特定屏幕?

标签 javascript react-native react-navigation expo

我正在使用 react-navigation:^1.0.0-beta.9 有没有办法返回到特定屏幕(不是前一个屏幕到当前屏幕)?我还将我的 react-navigationredux 集成在一起。我查看了文档,发现 back 接受了一个 key 参数,但这对我来说并不清楚,并尝试在屏幕名称中放置 back( { key: 'Screen B' }) 但它不起作用可能是因为它需要一个随机生成的 key ,除非特别指定。

例如我有这个StackNavigator

Screen A
- Screen B
  - Screen C
    - Screen D (Current)

假设我目前在 Screen D 上,我想返回到 Screen B 我该如何实现?

我不想使用 navigation.navigate('Screen B') 因为这会向堆栈添加另一个屏幕,这不是我所期望的。

最佳答案

1.在 screen D 内部调度一些 Action :

    const {navigation} = this.props;
    navigation.dispatch({
        routeName: 'B',
        type: 'GoToRoute',
    });

2.在MyStackNavigator.js中处理这个 Action

const MyStackNavigator = new StackNavigator(//...);
const defaultGetStateForAction = MyStackNavigator.router.getStateForAction;
MyStackNavigator.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);
};

然后你就可以直接从screen D转到screen B

关于javascript - React Navigation,如何返回特定屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44490737/

相关文章:

reactjs - html 标签 "/href"和 navlink 或 Link 之间的区别

javascript - map onclick 事件优先于图形点击事件

javascript - 使用 node fluent ffmpeg 合并多个视频

javascript - 如何将 @media 打印样式应用于 ckeditor 实例?

Javascript:如何删除附加的子行(tr)?

react-native - 如何按realm中的列表中包含的项目过滤 native react ?

react-native - React Native 深层链接事件监听器未触发

react-native - JS Root View 从其父 View 中删除后是否总是从 native 接收事件?

react-native - 如何使用react-navigation处理React Native App中TabNavigator选项卡项上的点击事件?

react-native - 在 react 导航中,routeName 和 key 之间有什么区别?