Option One:
First, the application scenarios:
when the app side development, but rather a return to a page when keeping all states jump page is not updated, that does not trigger a new cycle of life,
For example: A -> B -> C -> D
To return to the page directly from D to B while maintaining the status of all page page B, page B do not trigger the life cycle of,
Some people say you can use: this.props.navigation.navigate, jump can be achieved, but it will trigger a new page in the life cycle B
All with this.props.navigation.goBack ( 'accept parameters');
Second, it should be noted that the issue received parameter
1. official website goBack () official website usage react navigation
2.goBack parameters for the routing of key pages, this key is the system randomly assigned, is not the same every time load distribution; instead routeName set manually, so the parameters can not fill routeName jump, goBack if you do not parameters (ie key is undefined) will default to return to the previous page
goBack (key) This key means:
This page return key route from the routing value,
Rather than returning to the value of key page
That return from D to B, where the key values are not routing key value B page, but, the key values of C, B because C is returned, so the key here is the value of C should be the key page value
So, we need to return from D to B page should be
this.props.navigation.goBack ( "C page key")
REACT-Navigation only the Provide Because Method, goBack (Key), from the Back Key IT's Go, Go not to the Back
Key. ----------------
Copyright: This article is CSDN bloggers "stupid chubby "in the original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: https: //blog.csdn.net/qq_34645412/article/details/82424560
Option II:
If A -> B -> C - > D-> E stack order, we can navigate to when this page key passed as a parameter to a page, the next page prior to such pages would have a key, and you can complete the return.
A -> B {A.key} - > C {A.key, B.key} -> D {A.key, B.key, C.key} -> E {A.key, B.key, C .key, D.key}
but there is a problem, this will lead to a misplaced key, that if you want to return from E to A. page
you want to goback (params.keys.B);
if only one return or use goback ();
deal with dislocation problem we just need to key name to the name of a page of it.
code show as below:
this.props.navigation.navigate ( 'B', {Keys: {A_Key: this.props.navigation.state.key,}});
. 1
this can be directly returned A page using the A_Key
this.props.navigation.navigate('C',{
data:rowData,
keys:{...this.props.navigation.state.params.keys,B_key:this.props.navigation.state.key}
})
this.props.navigation.goBack(this.props.navigation.state.params.keys. A_key)
third solution:
react navigation default is to use the key as a parameter goback be returned, the key is a dynamically generated, rather than routeName our definition.
Online there are many ways to change some said the source, some say that the integration redux. Change the source code the way I have tried to return but if you open the sliding property, it is easy to get stuck. Integration redux is a nice way, but for the novice redux model or too complicated, moreover redux powerful that control data flow, only one went to school as a return to a framework for such a big and too time-consuming a .
Today we are not using any third-party framework, without modifying the source code, but also can be done, return any interface.
Option One (NEW Recommended):
"REACT-navigation": "^ 1.5.11" version found in the navigation page navigationOptions print is global and the page is printed by this.props.navigation current page navigation. So we can use this global navigation and then get into the global routing stack.
static Navigation_routers;
static navigationOptions = {
header:({navigation}) =>{
return <Header navigation = {navigation}
centerTxt = {'标题'}
renderRightView = {()=>{
return <TouchableOpacity activeOpacity={1} onPress={() => {
let {state:{routes}} = navigation;
console.log('RealNameIdentification navigation',navigation)
console.log('routes',routes);
Navigation_routers = routes;//保存全局的路由
let goToLogin = routes[routes.length-1].params&&routes[routes.length-1].params.login;
goToLogin&&goToLogin();
}}>
<View style={{width:SCALE(80),height:SCALE(42),justifyContent:'center'}}>
<Text style={{fontSize:FONT (30/2), color: '# 0094ff'}}> log </ Text>
</ View>
</ TouchableOpacity>}
}
/>
}
};
and a write function in the base class as follows:
//react navigation返回任意页面
goBackPage(routers,PageName){
for(let i=0;i<routers.length;i++){
if(routers[i].routeName==PageName){
if(i+1==routers.length){
this.props.navigation.goBack(null);
return;
}
console.log('执行了这里 返回'+PageName+":",routers[i].key);
this.props.navigation.goBack(routers[i+1].key);
return;
}
}
};
使用如下：
// The first parameter global routing the second parameter to jump to the page (the name is registered in the name of the route)
super.goBackPage (Navigation_routers, PageName);
support android && ios
Code: https: //github.com/wuyunqiang/RNApp
effective pro-test oh!
----------------
Disclaimer: This article is the original article CSDN bloggers "WYQ_XQ", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/u014041033/article/details/77880400