react-navigationメモ(2)を使用してヘッダーメニュー項目をカスタマイズ

react-navigationを使用してheaderRightメニューコンポーネントを実装します.
日常のくだらない話
前の記事では、react-navigationでさまざまなカスタムヘッダを作成する方法について説明しました.
この水文では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はどう書きますか?分析一ハ:

様子は「3つの点」:画像を使いましょう.

点反応しなければなりません:1つセットしましょう

点完展示メニュー:自己メンテナンス1状態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のsetParams APIをクリックするたびに指定されたページに渡される.
この方法にも欠陥があり、ヘッダーが透明でなければメニュー項目がヘッダーで上書きされ、ヘッダーに密着してもやや見苦しい.レイアウトを簡単に変更する必要があり、面倒です.ポイント:メニュー項目のpositionはabsoluteです.
オープンソースのシナリオの使用(検証されていません)
react-native-view-overflowこれは私が探したばかりの解決策で、コンポーネントを包むことで部分を超えたコンテンツを表示する効果を達成します.

import ViewOverflow from 'react-native-view-overflow';


    

私たちのこのシナリオでは、デフォルトのヘッダコンポーネントを書き換え、パートナーは自分で試してみることができます.(リンクをなくして逃げるなんて刺激的)
の最後の部分
ソースコードはGitHubで見ることができます.
効果図: