React Navigation -- Screen Navigation Prop 和 Navigation Actions

转载来自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)