React Navigation 自认比较好的navigator组件(一)

#更新： 最近react-navigation 更新到了1.0.0 beta9 版本，好多东西已经更改了，建议大家去github寻找最新的信息。下面的老版本就做个参考吧。http://www.jianshu.com/p/80408a62d690

React Navigation https://reactnavigation.org/docs/navigators/stack

控件主要分为三种：
1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏
2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏
3.DrawerNavigator：抽屉效果，左侧滑出这种效果。

Screen Navigation Prop

在你的app中，每一个界面都会得到一个navigation prop，包含着以下一些属性和action：

navigate - Link to other screens

调用此方法去链接你的其他界面，包含以下参数：
·routeName- 目标路由名称，将在你的app router中注册
·params-将参数合并到目标router中
·action-(高级)sub-action ，如果该界面是一个navigator的话，将运行这个sub-action
example：

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-The screen's current state/route

每个界面通过this.props.navigation.state去访问它的router，state其中包括了：
·routeName - router配置的名称
·key-用来区分router的唯一标示
·params-可选的一些string参数

setParams-Make changes to route params

该方法允许界面更改router中的参数，可以用来动态的更改header的内容

goBack-Close the active screen and move back

返回，pop回上一级

dispatch -Send an action to the router

使用dispatch可以向任何navigation传递一些其他的action，主要支持的action有：

Navigate

import { NavigationActions } from 'react-navigation'

const navigationAction = 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(navigationAction)

Reset

Reset方法会擦除掉所有的导航状态，并且使用内部新的结果替代

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

可以指定多个action，但是要给定正确的index

SetParams

为指定的router更新参数，该参数必须是已经存在于router的param中，

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({
  params: {}, // these are the new params that will be merged into the existing route params
  // The key of the route that should get the new params
  key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)

StackNavigator

简单的例子

class MyHomeScreen extends React.Component {
  static navigationOptions = {
     title: 'Home',    //设置navigator的title
  }

  render() {
    return (
      //button的onPress方法，实现点击跳转界面，并且传递参数name:Lucy
      <Button
        onPress={() => this.props.navigation.navigate('Profile', {name: 'Lucy'})}
        title="Go to Lucy's profile"
      />
    );
  }
}

//生成路由关系
const ModalStack = StackNavigator({
  Home: {
  //对应界面MyHomeScreen
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

·API Definition

StackNavigator(RouteConfigs, StackNavigatorConfig)

其中的参数：

RouteConfigs ：

路由配置和路由名称的一种映射，告诉navigator按照该路由要呈现什么。

StackNavigator({
  //Home界面route
  Home:{
    //require  screen就是一个react的组件(component)，用来展示的那个界面
    screen:HomeScreen,
    //optional   当深层次关联或者在web app中使用React Navigation,使用路径
    path:'people/:username',
    //optional Override navigationOptions方法，对navigator做一些配置
    navigationOptions:{
      //设置个标题
      title:({state}) => `${state.params.username}'s Profile'`
    },
  },

  //我的其他路由，类似于上面这种定义模式的，供给navigator实现页面见得跳转
  ...MyOtherRoutes,
)}

StackNavigatorConfig

option for the route(路由选项):
·initialRouteName -为stack设置默认的界面，必须和route configs里面的一个key匹配。
·initialRouteParams - 初始路由的参数。
·navigationOptions- 屏幕导航的默认选项。
·paths-route config里面路径设置的映射。

Visual Option(视觉选项):
·mode- 定义渲染(rendering)和转换(transitions)的模式,两种选项(给字符串即可)：
1) card-使用标准的iOS和Android的界面切换，这是默认的。
2)modal- 仅在iOS端有用，即模态出该视图。
·headerMode- 指定header应该如何被渲染,选项：
1)float- 共用一个header 意思就是有title文字渐变效果。
2)screen- 各用各的header 意思就是没有title文字渐变效果。
3)none- 没有header。
·cardStyle- 使用该属性继承或者重载一个在stack中的card的样式。
·onTransitionStart- 一个函数，在换场动画开始的时候被激活。
·onTransitionEnd- 一个函数，在换场动画结束的时候被激活。

Screen Navigation Options

通常你可以定义一个静态的navigationOptions在你的组件之上，例如:

class ProfileScreen extends React.Component {
  //设置navigation选项
  static navigationOptions = {
   //标题
    title: ({ state }) => `${state.params.name}'s Profile!`,
    //头部定义了一个右按钮，来改变edit的状态 ing或者完成
    header: ({ state, setParams }) => ({
      // Render a button on the right side of the header
      // When pressed switches the screen to edit mode.
      right: (
        <Button
          title={state.params.editing ? 'Done' : 'Edit'}
          onPress={() => setParams({editing: state.params.editing ? false : true})}
        />
      ),
    }),
  };
  ...

All navigationOptions for the StackNavigator:
·title- 界面的标题(string)
·header- header bar设置对象
1)visible - bool值，header是否可见。
2)title-标题 String或者是一个react 节点
3)backTitle-返回按钮在iOS平台上，默认是title的值
4)right- react 节点显示在header右边，例如右按钮
5)left- react 节点显示在header左边，例如左按钮
6)style-header的style
7)titleStyle- header的title的style (^__^) 嘻嘻……
8)tintColor- header的前景色
·cardStack- 配置card stack
1)gesturesEnabled- 是否允许通过手势关闭该界面，在iOS上默认为true，在Android上默认为false
再来一个例子，自定义的header:

static navigationOptions = {



        title: ({ state }) => {
            if (state.params.mode === 'info') {
                return `${state.params.user}'s Contact Info`;
            }
            return `Chat with ${state.params.user}`;
        },

        header: ({ state, setParams ,goBack}) => {

            // The navigation prop has functions like setParams, goBack, and navigate.  可以在header的构造方法里面传入setParams，goBack，navigate方法.

            let right = (
                <Button
                    title={`${state.params.user}'s info`}
                    onPress={() => setParams({ mode: 'info' })}
                />
            );
            if (state.params.mode === 'info') {
                right = (
                    <Button
                        title="Done"
                        onPress={() => setParams({ mode: 'none' })}
                    />
                );
            }

            let left = (
                <Button
                    title='返回'
                    onPress={() => {
                        goBack();
                    }}
                />
            );
            return { right ,left};
        },

    };

Navigator Props

一个navigator组件被StackNavigator(...)创建出来，可以伴随以下属性。
·screenProps- 为子界面传递额外的参数、选项，for example：

const SomeStack = StackNavigator({
  // config 配置该navigator
});

<SomeStack
  //通过this.props.screenProps获得该参数内容
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>