运用react-navigation完成headerRight菜单组件。

一样平常空话

上一篇文章讲了怎样用react-navigation建立种种自定义头部(header)。

这篇水文讲一下怎样完成header右部的菜单项。临时只支撑IOS，缘由后文会申明，并给出一些未论证的主意

正文

写的啥？

参考京东商品详情页右上角的交互。

怎样完成

自定义头部右边很简单，设置navigationOptions的headerRight选项，传入我们的自定义组件即可。

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    GoodDetail: {
      screen: GoodDetail,
      navigationOptions: ({navigation}) => ({
        headerTransparent: true,
        headerStyle: {
          borderBottomWidth: 0,
        },
        headerTintColor: '#313131',
        shadowOpacity: 0,
        headerRight: <HeaderRight navigation={navigation}/>
      })
    }
  }
)

HeaderRight怎样写？剖析一哈：

1. 模样是”三个点”：用图片吧。
2. 点它要有回响反映： 套一个<TouchableOpacity>吧
3. 点完展示菜单：本身保护一个状况isMenuVisible
4. 临时就那么多，先写写看。

class HeaderRight extends Component {
  constructor() {
    super()
    this.state = {
      isMenuVisible: false
    }
  }

  toggleMenu = () => {
    this.setState((prevState) => {
      isMenuVisible: !prevState.isMenuVisible
    })
  }

  render() {
    return (
      <TouchableOpacity onPress={this.toggleMenu}>
        <Image source={require('/path/to/image')}/>
        {
          isMenuVisible && (
            <HeaderMenu 
              navigation={this.props.navigation}
            />
          )
        }
      </TouchableOpacity>
    )
  }
}

哦了,HeaderMenu是一个无状况组件，也就是菜单项，款式依据营业自行写咯～

写完以后彷佛没什么题目的，然则假如你转动你的页面（假如你的页面能够转动），你会发明菜单项不会本身消逝。

这怎样行！

处理要领： 我们给HeaderMenu外层包裹一个View，宽高为容器宽高，相对定位，使其充溢全部屏幕。再在外层包裹一个TouchableWithoutFeedback，注册onPress，点击时实行隐蔽菜单的函数，而这个函数能够定义在HeaderRight中，经由过程props通报给HeaderMenu

为何只支撑IOS

实在我是在写这篇文章的时刻才发明，我这个要领只支撑IOS（之前用的是别的一个要领）。 究其缘由是RN在Android端不支撑显现超越父元素部份的内容，用css的话来说就是overflow: hidden而且只能是hidden。

这方面的呼声也不低，期待官方能处理吧。

Android下处理要领的想象

将HeaderMenu部份写在对应的组件中。

在设置HeaderRight时，经由过程一个闭包保留菜单项的状况。每次点击经由过程navigation的setParamsAPI来对指定页面通报这个状况。

这个要领也有缺点，假如header不是通明的，则菜单项会被header掩盖，就算紧贴header也会略显丢脸。 以及规划轻易须要大修改，而且很贫苦。提一点：菜单项的position是absolute。

采纳开源的计划（未考证）

react-native-view-overflow
这是我刚搜到的处理计划，经由过程包裹一层组件来到达显现超越部份的内容的结果。

import ViewOverflow from 'react-native-view-overflow';

<ViewOverflow>
    <ComponentToEnableOverflow />
</ViewOverflow>

在我们这个情形下，就要改写默许的header组件，小伙伴能够自行尝试。（丢链接就跑，真刺激）

末端

源代码能够在GitHub上看到。

结果图：