react-navigation使用小记(2) 自定义header菜单项

ixlei 发布于2019-08-23 11:01 / 3176人阅读

摘要：使用实现菜单组件。日常废话上一篇文章讲了如何用创建各种自定义头部。这篇水文讲一下如何实现右部的菜单项。怎么实现自定义头部右侧很简单，配置的选项，传入我们的自定义组件即可。在配置时，通过一个闭包保存菜单项的状态。提一点菜单项的是。

使用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怎么写？分析一哈：

样子是"三个点"：用图片吧。

点它要有反应：套一个吧

点完展现菜单：自身维护一个状态isMenuVisible

暂时就那么多，先写写看。

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

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

  render() {
    return (
      
        
        {
          isMenuVisible && (
            
          )
        }
      
    )
  }
}

哦了,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";

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

结尾

源代码可以在GitHub上看到。

效果图：

云服务器 GPU云服务器 cdn自定义header 自定义菜单自定义菜单详解 js自定义菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96910.html

react-navigation使用详解

摘要：导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的示例项目报如下的错误，可能是大家使用了命令导致的，解决这个错误的办法就是将删除，然后重新使用命令来安装，最后使用来起服务，应该就不报错了。 react-navigation导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 评论0 收藏0
电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

MockingBird 2019-08-23 14:08 评论0 收藏0
Vue在ie10下空白页的debug小记

摘要：前几天写的一段，在下一片空白，显示。之，说是最后一项有多余的逗号，例如最后一项不能有逗号检索修正所有文件不表，然而情况依旧。。。继续先前的睿智技巧，终于发现，好几个。。。前几天写的一段Vue，在ie下一片空白，f12显示script1003: expected :。 baidu、google之，说是json最后一项有多余的逗号，例如 { a: 5, b: 4, // 最后一项...

CarterLi 2019-08-26 11:51 评论0 收藏0