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