资讯专栏INFORMATION COLUMN

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

ixlei / 3160人阅读

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

使用react-navigation实现headerRight菜单组件。 日常废话

上一篇文章讲了如何用react-navigation创建各种自定义头部(header)。

这篇水文讲一下如何实现header右部的菜单项。暂时只支持IOS,原因后文会说明,并给出一些未论证的想法

正文 写的啥?

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

怎么实现

自定义头部右侧很简单,配置navigationOptionsheaderRight选项,传入我们的自定义组件即可。

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上看到。

效果图:

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

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

相关文章

  • react-navigation使用详解

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

    stonezhu 评论0 收藏0
  • 电影天堂React Native 客户端V2.0发布

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

    MockingBird 评论0 收藏0
  • Vue在ie10下空白页的debug小记

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

    CarterLi 评论0 收藏0

发表评论

0条评论

ixlei

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<