資訊專欄INFORMATION COLUMN
摘要：使用實現(xiàn)菜單組件。日常廢話上一篇文章講了如何用創(chuàng)建各種自定義頭部。這篇水文講一下如何實現(xiàn)右部的菜單項。怎么實現(xiàn)自定義頭部右側(cè)很簡單，配置的選項，傳入我們的自定義組件即可。在配置時，通過一個閉包保存菜單項的狀態(tài)。提一點菜單項的是。
使用react-navigation實現(xiàn)headerRight菜單組件。 日常廢話
上一篇文章講了如何用react-navigation創(chuàng)建各種自定義頭部(header)。
這篇水文講一下如何實現(xiàn)header右部的菜單項。暫時只支持IOS，原因后文會說明，并給出一些未論證的想法
正文 寫的啥？參考京東商品詳情頁右上角的交互。
怎么實現(xiàn)自定義頭部右側(cè)很簡單，配置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怎么寫？分析一哈：
樣子是"三個點"：用圖片吧。
點它要有反應(yīng)： 套一個
點完展現(xiàn)菜單：自身維護一個狀態(tài)isMenuVisible
暫時就那么多，先寫寫看。
class HeaderRight extends Component {
constructor() {
super()
this.state = {
isMenuVisible: false
}
}
toggleMenu = () => {
this.setState((prevState) => {
isMenuVisible: !prevState.isMenuVisible
})
}
render() {
return (
{
isMenuVisible && (
)
}
}
哦了,HeaderMenu是一個無狀態(tài)組件，也就是菜單項，樣式根據(jù)業(yè)務(wù)自行寫咯～
寫完之后好像沒什么問題的，但是如果你滾動你的頁面（如果你的頁面可以滾動），你會發(fā)現(xiàn)菜單項不會自己消失。
這怎么行！
解決方法： 我們給HeaderMenu外層包裹一個View，寬高為容器寬高，絕對定位，使其充滿整個屏幕。再在外層包裹一個TouchableWithoutFeedback，注冊onPress，點擊時執(zhí)行隱藏菜單的函數(shù)，而這個函數(shù)可以定義在HeaderRight中，通過props傳遞給HeaderMenu
為什么只支持IOS其實我是在寫這篇文章的時候才發(fā)現(xiàn)，我這個方法只支持IOS（以前用的是另外一個方法）。 究其原因是RN在Android端不支持顯示超出父元素部分的內(nèi)容，用css的話來講就是overflow: hidden而且只能是hidden。
這方面的呼聲也不低，期待官方能解決吧。
Android下解決方法的設(shè)想 將HeaderMenu部分寫在對應(yīng)的組件中。在配置HeaderRight時，通過一個閉包保存菜單項的狀態(tài)。每次點擊通過navigation的setParamsAPI來對指定頁面?zhèn)鬟f這個狀態(tài)。
這個方法也有缺陷，如果header不是透明的，則菜單項會被header覆蓋，就算緊貼header也會略顯難看。 以及布局方便需要大改動，并且很麻煩。提一點：菜單項的position是absolute。
采用開源的方案（未驗證）react-native-view-overflow
這是我剛搜到的解決方案，通過包裹一層組件來達到顯示超出部分的內(nèi)容的效果。
import ViewOverflow from "react-native-view-overflow";
在我們這個情景下，就要改寫默認的header組件，小伙伴可以自行嘗試。（丟鏈接就跑，真刺激）
結(jié)尾源代碼可以在GitHub上看到。
效果圖：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96910.html
摘要：導(dǎo)航組件使用詳解注意了，如果有小伙伴們發(fā)現(xiàn)運行作者提供的示例項目報如下的錯誤，可能是大家使用了命令導(dǎo)致的，解決這個錯誤的辦法就是將刪除，然后重新使用命令來安裝，最后使用來起服務(wù)，應(yīng)該就不報錯了。 react-navigation導(dǎo)航組件使用詳解 注意了，如果有小伙伴們發(fā)現(xiàn)運行作者提供的react-navigation示例項目報如下的錯誤，可能是大家使用了 yarn install 命...
摘要：電影天堂客戶端重新開始具體更新以為準。重新開始兩年前發(fā)布了第一個版本。最為一名偏體驗偏設(shè)計的前端開發(fā)者，對界面和用戶體驗都有極高的重視。 電影天堂React Native 客戶端 重新開始！ 具體更新以https://github.com/XboxYan/DYTT為準。 重新開始 兩年前發(fā)布了第一個版本。 現(xiàn)在， 使用最新的react-native 0.57和全新的設(shè)計完成了V2.0 ...
摘要：前幾天寫的一段，在下一片空白，顯示。之，說是最后一項有多余的逗號，例如最后一項不能有逗號檢索修正所有文件不表，然而情況依舊。。。繼續(xù)先前的睿智技巧，終于發(fā)現(xiàn)，好幾個。。。 前幾天寫的一段Vue，在ie下一片空白，f12顯示script1003: expected :。 baidu、google之，說是json最后一項有多余的逗號，例如 { a: 5, b: 4, // 最后一項...
閱讀 1144·2021-10-08 10:04
閱讀 3588·2021-08-05 10:01
閱讀 2351·2019-08-30 11:04
閱讀 1850·2019-08-29 15:29
閱讀 944·2019-08-29 15:12
閱讀 1742·2019-08-26 12:11
閱讀 3178·2019-08-26 11:33
閱讀 1217·2019-08-26 10:23
