2016-09-13 8 views
4

特定のページを表示するときにバーガーメニューボタンを追加し、すべてのページに表示される右側のボタンを追加したいとします。これは反応ネイティブルータフラックスで可能ですか?ネイティブルータフラックスのネイティブのNavBarにカスタムボタンを追加することは可能ですか?

UPDATE:私はこのコード

<Scene key="home" 
     component={HomePage} 
     hideBackImage={true} 
     ... 
     rightButtonImage={HelpIcon} 
     onRight={()=>{}} 
     rightTitle={null} 
     rightButtonIconStyle={{ width: 44, height: 44 }} /> 

バーガーメニューボタンがより困難に証明されたを使用してたくさんの悩みなしで右側のボタンを取得することができました。ナビゲーションバーにはdrawerImageというプロパティがありますが、そのdrawerImageの表示方法とハンドラ関数の設定方法に関するその他のドキュメントはありません。

私は左ボタンの場合と同じ方法で、右ボタンのイメージを設定しようとしましたが、右ボタンの右ボタンと右ボタンボタンのアイコスタイルはボタンは表示されませんでした。

UPDATE 2

:私はこの問題が原因のv3.34.0-ネイティブ・ルータ・フラックスを反応させるために格下げ: https://github.com/aksonov/react-native-router-flux/issues/1154

と私のシーンにこれらの小道具を追加しました:

... 
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */ 
leftButtonImage={NavigationBurgerIcon} 
onLeft={()=>{}} 
leftTitle={null} 
leftButtonIconStyle={{ width: 30, height: 30 }} 
... 

答えて

4

は、あなたがあなた自身を書くことができます100%コントロール用のナビゲーションバー。あなたはtheir implementation of NavBarの離れてあなたのナビゲーションバーのコンポーネントを構築し、次の操作を実行できます。

<Router 
    navBar={NavBar} 
    ... 
/> 

react-native-router-flux apiはこのについての詳細を持っています。

完了したら、カスタムプロパティを作成して、さまざまなNavBarビヘイビアカスタムをプロジェクトに追加して、ハンバーガーアイコンとやり取りする方法など、シーンに追加することができます。

+0

を使用していますか? – anivaler

2

あなたはこのようなことをすることができます。

<Router renderLeftButton={this.navBarButton}> 
    <Scene ..... 
</Router> 

機能:

navBarButton(){ 
return(
    <TouchableOpacity onPress={() => Actions.refresh({ key: 'drawer', open: true })}> 
    <Icon name='ios-menu' size={30} /> 
    </TouchableOpacity> 
) 

} 

私は私のカスタムナビゲーションバーのボタンをクリックしたとき、私は私のコンポーネントで聴くことができますどのようにreact-native-vector-icons

関連する問題