轉載來自React Navigation(需要科學上網)：https://reactnavigation.org/docs/navigators/navigation-prop
------------------------------------------------------------------------------------------------------
第二次編輯補充：
React Navigation:
NavigationActions中的back方法的用法，舉例：棧中有A/B/C/D四個頁面，棧頂是D，從D直接跳轉到A，
那麼需要在B加載的時候就記下B的key，通過this.props.navigation.state.key得到，記錄在一個全局變量中,
然後this.props.navigation.dispatch(NavigationActions.back({key: '記錄在全局變量中的那個key'}));
-------------------------------------------------------------------------------------------------------
Screen Navigation Prop:
Each screen in your app will receive a navigation prop which contain the following:1. navigate - (helper) link to other screens
2. state - screen's current state/routes
3. setParams - (helper) make changes to route's params
4. goBack - (helper) close active screen and move back
5. dispatch - send an action to router
詳細介紹：
1. navigate - Link to other screens
Call this to link to another screen in your app. Takes the following arguments:
navigate(routeName, params, action)
routeName - A destination routeName that has been registered somewhere in the app's router
params - Params to merge into the destination route
action - (advanced) The sub-action to run in the child router, if the screen is a navigator.
See Actions Doc for a full list of supported actions.
class HomeScreen extends React.Component {
render() {
const {navigate} = this.props.navigation;
return (
<View>
<Text>This is the home screen of the app</Text>
<Button
onPress={() => navigate('Profile', {name: 'Brent'})}
title="Go to Brent's profile"
/>
</View>
)
}
}
2. state - The screen's current state/route
A screen has access to its route via this.props.navigation.state. Each will return an object with the following:
{
// the name of the route config in the router
routeName: 'profile',
//a unique identifier used to sort routes
key: 'main0',
//an optional object of string options for this screen
params: { hello: 'world' }
}
class ProfileScreen extends React.Component {
render() {
const {state} = this.props.navigation;
// state.routeName === 'Profile'
return (
<Text>Name: {state.params.name}</Text>
);
}
}
3. setParams - Make changes to route params
Firing the setParams action allows a screen to change the params in the route,
which is useful for updating the header buttons and title.
class ProfileScreen extends React.Component {
render() {
const {setParams} = this.props.navigation;
return (
<Button
onPress={() => setParams({name: 'Lucy'})}
title="Set title name to 'Lucy'"
/>
)
}
}
4. goBack - Close the active screen and move back
Optionally provide a key, which specifies the route to go back from. By default,
goBack will close the route that it is called from. If the goal is to go back anywhere,
without specifying what is getting closed, call .goBack(null);
class HomeScreen extends React.Component {
render() {
const {goBack} = this.props.navigation;
return (
<View>
<Button
onPress={() => goBack()}
title="Go back from this HomeScreen"
/>
<Button
onPress={() => goBack(null)}
title="Go back anywhere"
/>
<Button
onPress={() => goBack('screen-123')}
title="Go back from screen-123"
/>
</View>
)
}
}
5. dispatch - Send an action to the router
Use dispatch to send any navigation action to the router. The other navigation functions use dispatch behind the scenes.
Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.
See Navigation Actions Docs for a full list of available actions.
import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
// navigate can have a nested navigate action that will be run inside the child router
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
Navigation Actions
All Navigation Actions return an object that can be sent to the router using navigation.dispatch() method.
Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.
The following actions are supported:
1. Navigate - Navigate to another route
2. Reset - Replace current state with a new state
3. Back - Go back to previous state
4. Set Params - Set Params for given route
5. Init - Used to initialize first state if state is undefined
1. Navigate
The Navigate action will update the current state with the result of a Navigate action.
routeName - String - Required - A destination routeName that has been registered somewhere in the app's router
params - Object - Optional - Params to merge into the destination route
action - Object - Optional - (advanced) The sub-action to run in the child router, if the screen is a navigator.
Any one of the actions described in this doc can be set as a sub-action.
import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)
2. Reset
The Reset action wipes the whole navigation state and replaces it with the result of several actions.
index - number - required - Index of the active route on routes array in navigation state.
actions - array - required - Array of Navigation Actions that will replace the navigation state.
import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Profile'})
]
})
this.props.navigation.dispatch(resetAction)
How to use the index parameter
The index param is used to specify the current active route.
eg: given a basic stack navigation with two routes Profile and Settings.
To reset the state to a point where the active screen was Settings but have it stacked on top of a Profile screen,
you would do the following:
import { NavigationActions } from 'react-navigation'
// reset方法的奧義
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'Profile'}),
NavigationActions.navigate({ routeName: 'Settings'})
]
})
this.props.navigation.dispatch(resetAction)
3. Back
Go back to previous screen and close current screen. back action creator takes in one optional parameter:
key - string or null - optional - If set, navigation will go back from the given key.
If null, navigation will go back anywhere.
import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back({
key: 'Profile'
})
this.props.navigation.dispatch(backAction)
4. SetParams
When dispatching SetParams, the router will produce a new state that has changed the params of a particular route,
as identified by the key
params - object - required - New params to be merged into existing route params
key - string - required - Route key that should get the new params
import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
params: { title: 'Hello' },
key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)