react-navigation使用小記(2) 自定義header菜單項

ixlei 發布于2019-08-23 11:01 / 3177人閱讀

摘要：使用實現菜單組件。日常廢話上一篇文章講了如何用創建各種自定義頭部。這篇水文講一下如何實現右部的菜單項。怎么實現自定義頭部右側很簡單，配置的選項，傳入我們的自定義組件即可。在配置時，通過一個閉包保存菜單項的狀態。提一點菜單項的是。

使用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自定義菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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