摘要:使用实现菜单组件。日常废话上一篇文章讲了如何用创建各种自定义头部。这篇水文讲一下如何实现右部的菜单项。怎么实现自定义头部右侧很简单,配置的选项,传入我们的自定义组件即可。在配置时,通过一个闭包保存菜单项的状态。提一点菜单项的是。
使用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上看到。
效果图:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96910.html
摘要:导航组件使用详解注意了,如果有小伙伴们发现运行作者提供的示例项目报如下的错误,可能是大家使用了命令导致的,解决这个错误的办法就是将删除,然后重新使用命令来安装,最后使用来起服务,应该就不报错了。 react-navigation导航组件使用详解 注意了,如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误,可能是大家使用了 yarn install 命...
摘要:电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者,对界面和用户体验都有极高的重视。 电影天堂React Native 客户端 重新开始! 具体更新以https://github.com/XboxYan/DYTT为准。 重新开始 两年前发布了第一个版本。 现在, 使用最新的react-native 0.57和全新的设计完成了V2.0 ...
摘要:前几天写的一段,在下一片空白,显示。之,说是最后一项有多余的逗号,例如最后一项不能有逗号检索修正所有文件不表,然而情况依旧。。。继续先前的睿智技巧,终于发现,好几个。。。 前几天写的一段Vue,在ie下一片空白,f12显示script1003: expected :。 baidu、google之,说是json最后一项有多余的逗号,例如 { a: 5, b: 4, // 最后一项...
阅读 1064·2021-10-08 10:04
阅读 3505·2021-08-05 10:01
阅读 2258·2019-08-30 11:04
阅读 1764·2019-08-29 15:29
阅读 771·2019-08-29 15:12
阅读 1654·2019-08-26 12:11
阅读 3096·2019-08-26 11:33
阅读 1150·2019-08-26 10:23