日常废话react-navigation是一个来源于react社区的导航解决方案。 以我一个月资深的react开发经验来看，说是react-native开发app必备库之一毫不过分。
在开发过程中，不同页面因为不同的业务需求会有不同的头部(header)，这篇文章针对几种常用我遇到过的各种header提供对应的react-navigation解决方案。
我是正文底部tab对app来说是十分常见的需求。react-navigation也提供了相应的api来创建底部tab： createbottomtabnavigator
如何定制tab页的header呢？ 我们分情况讨论：
所有tab页都要header很简单，无需额外的配置。
所有tab页都不要header第一时间可能会想到的是在createbottomtabnavigator中对每个页面的navigationoptions对象设置header为null。
createbottomtabnavigator( { home: { screen: home, navigationoptions: { header: null // 无效！！ } } })
但实际上createbottomtabnavigator中的navigationoptions对象是不接受header参数的，至少文档中没写。官方文档
解决方式：在根级导航中设置。
const appnavigator = createstacknavigator( { main: { screen: tabnavigator, // tabnavigator就是通过createbottomtabnavigator创建的底部导航 navigationoptions: { header: null } } // other pages })
只有某个tab要header其实navigator是可以互相嵌套的。 就像上面的例子中，main路由的页面是createbottomtabnavigator创建的底部导航。同理，底部导航中某个tab的页面也可以是导航页。有点绕，还是看代码
const bottomtabnavigator = createbottomtabnavigator( { home: { screen: home, navigationoptions: { // some options } }, user: { // user页要头~ screen: createstacknavigator( user: { screen: user, navigationoptions: { header: customheader } } ) } })const appnavigator = createstacknavigator( { main: { screen: bottomtabnavigator, navigationoptions: { header: null // 这里要将bottomtabnavigator的header设为null } }, other: { screen: other } })
因为默认情况下bottomtabnavigator会有一个自己的header，而user我们又创建了一个带header的路由页面，所以我们将main路由（bottomtabnavigato）的header设为null，如果不设置的，页面会有2个header哦，小伙伴可自行尝试。
某tab页不要header or 需要定制header如果我只有某个tab页不要header，咋办？
还是从navigationoptions入手，navigationpptions属性可以是一个接受navigation对象，返回一个新对象的函数。
关于navigation对象，可以看官方文档
这里我们用到了该对象的state属性。
现在我们有如下导航配置：
const tabnavigator = createbottomtabnavigator( { home: { screen: home, navigationoptions: { title: '首页' } }, phone: { screen: createstacknavigator( { phone: { screen: phone, navigationoptions: ({ navigation }) => ( { // phoneheader为自定义react组件 header: <phoneheader navigation={navigation}/> } ) } } ), navigationoptions: { tabbarvisible: false, title: '机型' } }, user: { screen: user, navigationoptions: { title: '我的' } } })
上面代码创建了包含3个tab的底部导航，其中phone的header是定制的。接下去我们要做的是配置在appnavigator中配置tabnavigator的navigation属性，根据不同的路由使用不同的header(即当处在home页或是user页时候，使用默认的header，当处在phone页面时，移除header。
为什么是移除header?
因为phone页面已经自定义了header，我们只需移除外层tabnavigator的header即可。如果不然，会有2个header（tabnavigator和phone2个header）。这个上面已经提到。另外，也可以将定制的header配置在appnavigator中tabnavigator的navigation属性里。（未验证，可自行尝试。）
const appnavigator = createstacknavigator( { main: { screen: tabnavigator, navigationoptions: ({ navigation }) => { const titlemap = { home: '首页', user: '我的' } // 根据路由的顺序以及路由名定义title const result = { title: titlemap[navigation.state.routes[navigation.state.index].routename], headertitlestyle: { fontweight: '600', color: color.gray_1, fontsize: px2p(18) }, headerbacktitle: null } // 在配置tabnavigator时，phone页面是第一个定义的(zero-indexed)。 // 所以当index为1的时，header设为null // 或者将header设为自定义header，对应修改tabnavigator中phone。 if (navigation.state.index === 1) { result.header = null result.headertransparent = true } return result } }, ...pages // 其他页面 }, { initialroutename: 'main' })
相关推荐：
对react事件系统的解析
react中动画不生效的原因分析
以上就是react-navigation在开发中的使用介绍的详细内容。