react-navigation 运用小记

一样平常空话

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

END

至此，这篇水文也写的差不多了。

下篇文章（假如有）我会写一下关于自定义header的部份。

主如果headerRight部份，比方淘宝京东的商品详情页右上角会有个按钮，点击弹出菜单栏。

Thanks for reading~