React-navigation - 屏幕导航(Screen N

应用程序中的每个屏幕都将收到一个navigation属性，其中包含以下内容：

• navigate - （helper）链接到其他屏幕
• state - 屏幕当前的状态/路由
• setparams - (helper)改变路由的参数
• goback - (helper)关闭当前的屏幕和向后移动
• dispatch -向路由器发送一个action

注意：navigation 属性向下传递到每个导航相关组件，包括导航器。唯一的例外是一个navigator的navigation 属性可能没有helper功能（navigate，goback等）；它只有state和dispatch。为了导航器用navigation属性中的navigate，您将不得不使用动作创建者(action creator)进行调度(dispatch).

与Redu相关的注意事项

人们并不是正确的使用redux，因为他们误解了导航器顶级API的navigation属性是可选的。如果导航器没有得到navigation 属性，导航器将保持自己的状态，但是当你的应用程序使用redux的时候 ，这个特性不起作用。对于嵌套在主导航器中的导航器，您总是希望通过屏幕的导航属性( navigation prop)往下传递。这允许您的根导航器与所有子导航器通信并提供状态。只有您的根路由器需要与redux集成，因为所有其他路由器都在其中。

navigate - 链接到其他屏幕

navigate(routeName, params, action)

• routeName - 已在应用程序的路由器中注册的目标路由名称
• params - 参数合并到目标路由route
• action - （高级）如果屏幕是导航器，在子路由器中运行的子操作Doc

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>
     )
   }
}

state - 屏幕的当前state/route

屏幕可以通过this.props.navigation.state访问其路线。 每个将返回一个对象，如下所示：

{
  // 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>
    );
  }
}

setParams - 修改路由参数

触发setParams允许屏幕更改路线中的参数，这对于更新标题按钮和标题非常有用

class ProfileScreen extends React.Component {
  render() {
    const {setParams} = this.props.navigation;
    return (
      <Button
        onPress={() => setParams({name: 'Lucy'})}
        title="Set title name to 'Lucy'"
      />
     )
   }
}

goBack - 关闭当前屏幕并返回

可选择提供一个密钥，该密钥指定要从中返回的路线。 默认情况下，goBack将关闭当前的路由。 如果目标是回到任何地方，而不指定关闭哪个页面，请调用.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>
     )
   }
}

从指定的页面返回
考虑下面的导航历史记录：

navigation.navigate(SCREEN_KEY_A);
...
navigation.navigate(SCREEN_KEY_B);
...
navigation.navigate(SCREEN_KEY_C);
...
navigation.navigate(SCREEN_KEY_D);

假如你在 screen D 并且想要返回到 screen A（关闭 D, C 和 B），那么你就需要这么写：

navigation.goBack(SCREEN_KEY_B) // will go to screen A FROM screen B

请看dome 中的例子,暂时有问题

dispatch -给路由发送一个行为

使用 dispatch 给路由指派任意的 navigation 行为，其它的 navigation 函数使用后台的 dispatch 来实现。记住如果你想指派 react-navigation 行为的话，你应该使用库里提供的 action creators。查看 Navigation 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)