react-navigation中的goBack()问题

作者: hello老文 | 来源:发表于2017-04-12 23:37 被阅读5446次

react-navigation提供有goBack()这api, 但是使用返回栈中某个组件的方法this.props.navigation.goBack('component')或this.props.navigation.dispatch(NavigationActions.back({key: "component"}))没有反应, 原理是因为这里的component不是用自定义的routeName而是用自动生成的随机值key. 又没有提供有api获取组件的key, 手动去获取又十分麻烦.

如何才能让goBack()支持使用routeName呢, 这里找到了一个解决方案 issues;

具体就是:

把项目/node_modules/react-navigation/src/routers/StackRouter.js文件里的 const backRoute = state.routes.find((route: *) => route.key === action.key); 改成 const backRoute = state.routes.find(route => route.routeName === action.key);

但不是很完美, 这里的component要填想返回的组件的前一个组件的routeName, 比如你的栈里顺序是home1, home2, home3, home4, 在home4里要返回home2, 使用this.props.navigation.goBack('home3');; 并且又会带出一个问题: goBack()方法没反应了, 必须加个null进去, 写成goBack(null)...

有点坑...

不知有没有更好的解决方法...

网友评论

马野:https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working

4d0d53cf6222:获取了route栈好处大大地，不但可以确定的反回到栈中的哪个screen，还可以完成"返回到上一层的上一层"这种操作

4d0d53cf6222:通过redux，navigation stack中所有的routeName 和key 都有

d085fdc7c938:@星落_e11b 重置导航栈确实可以，但是因项目复杂，重置的时候会出现各种生命周期类问题，所以想直接goback(key)这样，这样不行的话，看来只能把项目的生命周期好好梳理下了。

4d0d53cf6222:@谁占用了我的昵称呢你不用goBack也可以用另一个api。 const resetAction = NavigationActions.reset({
index: index-2,
actions: [
NavigationActions.navigate({ routeName: 'Main'}),
]
})。然后dispatch。这个能实现goBack的功能并且还能实现goBack实现不了的功能（比如反回到上一个页面的上一个页面；返回到栈的第几层，然后直接跳转至哪个页面。），可以对router栈进行各种操作。

d085fdc7c938:你这样实践可以吗？结合redux确实能获取到key，但是为什么我goBack(key)，并不能返回这个key对应的组件，什么都没有执行

4d0d53cf6222:有办法啊，用react-navigation和redux组合的方案。这样可以从store里获取route信息，而这其中就有那个自动生成的随机值key。获取了这个key用原始api就可以goback啊

saiGo:https://github.com/gorokhovich/react-navigation/tree/feature/goback-functionality
这个框架的一个分支貌似新添加了2个属性来解决这个问题

陈友辉:我目前的解决方式是在上个页面的this.props.navigation.state.key取到值，然后传给下一个界面，下一个界面用goBack(key)来返回界面。
但是很诡异的是，在当前页用this.props.navigation.state.key取到的key是上个页面的key
意思就是page1-> page2-> page3 如果要从page3回到page1，就要在page2取key然后传给page3

马野:https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working
4d0d53cf6222:获取了route栈好处大大地，不但可以确定的反回到栈中的哪个screen，还可以完成"返回到上一层的上一层"这种操作
4d0d53cf6222:通过redux，navigation stack中所有的routeName 和key 都有
d085fdc7c938:@星落_e11b 重置导航栈确实可以，但是因项目复杂，重置的时候会出现各种生命周期类问题，所以想直接goback(key)这样，这样不行的话，看来只能把项目的生命周期好好梳理下了。
4d0d53cf6222:@谁占用了我的昵称呢你不用goBack也可以用另一个api。 const resetAction = NavigationActions.reset({
index: index-2,
actions: [
NavigationActions.navigate({ routeName: 'Main'}),
]
})。然后dispatch。这个能实现goBack的功能并且还能实现goBack实现不了的功能（比如反回到上一个页面的上一个页面；返回到栈的第几层，然后直接跳转至哪个页面。），可以对router栈进行各种操作。
d085fdc7c938:你这样实践可以吗？结合redux确实能获取到key，但是为什么我goBack(key)，并不能返回这个key对应的组件，什么都没有执行
4d0d53cf6222:有办法啊，用react-navigation和redux组合的方案。这样可以从store里获取route信息，而这其中就有那个自动生成的随机值key。获取了这个key用原始api就可以goback啊
saiGo:https://github.com/gorokhovich/react-navigation/tree/feature/goback-functionality
这个框架的一个分支貌似新添加了2个属性来解决这个问题
陈友辉:我目前的解决方式是在上个页面的this.props.navigation.state.key取到值，然后传给下一个界面，下一个界面用goBack(key)来返回界面。
但是很诡异的是，在当前页用this.props.navigation.state.key取到的key是上个页面的key
意思就是page1-> page2-> page3 如果要从page3回到page1，就要在page2取key然后传给page3

react-navigation中的goBack()问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native资料汇总

React Native 收纳

Web前端之路

iOS Developer

React Native开发经验集