2016-11-18 9 views
1

私は、ルートコンポーネントとしてLogin.jsを使用してNavigtorを開始しました。ログイン時には、プッシュメソッドを使用して、スライドメニューが表示されているダッシュボード画面に移動しました。私は反応ネイティブドロワーレイアウトを使用してスライドメニューを実装しました。 Dashbord.jsは別のファイルです。今私は、ナビゲーションバーの左ボタンを制御したい。 ありがとうございます。このため実行時にネイティブの反応ネイティブボタンを変更するにはどうすればいいですか?

答えて

1

、あなたはApp.js内のすべての経路の異なるケースを管理する必要が

App.js

const NavigationBarRouteMapper = { 
 
    LeftButton(route, navigator, index, navState) { 
 
     switch (route.id) { 
 
      case 'Dashboard': 
 
       return (
 
        <TouchableOpacity 
 
         style={styles.navBarLeftButton} 
 
         onPress={() => {_emitter.emit('openMenu')}}> 
 
         <Icon name='menu' size={25} color={'white'} /> 
 
        </TouchableOpacity> 
 
       ) 
 
      case 'Page1': 
 
       return (
 
        <TouchableOpacity 
 
         style={styles.navBarLeftButton} 
 
         onPress={() => {_emitter.emit('openMenu')}}> 
 
         <Icon name='menu' size={25} color={'white'} /> 
 
      case 'Page2': 
 
       return (
 
        <TouchableOpacity 
 
         style={styles.navBarLeftButton} 
 
         onPress={() => {navigator.pop()}}> 
 
         <Icon name='arrow-back' size={25} color={'white'} /> //you can change icon as your requirements 
 
        </TouchableOpacity> 
 
       ) 
 
      default: 
 
       return (
 
        <TouchableOpacity 
 
         style={styles.navBarLeftButton} 
 
         onPress={() => {_emitter.emit('back')}}> 
 
         <Icon name='chevron-left' size={25} color={'white'} /> 
 
        </TouchableOpacity> 
 
       ) 
 
     } 
 
    }, 
 

 
    RightButton(route, navigator, index, navState) { 
 
     return (
 
      <TouchableOpacity 
 
       style={styles.navBarRightButton}> 
 
       <Icon name='more-vert' size={25} color={'white'} /> 
 
      </TouchableOpacity> 
 
     ) 
 
    }, 
 

 
    Title(route, navigator, index, navState) { 
 
     return (
 
      <Text style={[styles.navBarText, styles.navBarTitleText]}> 
 
       {route.title} 
 
      </Text> 
 
     ) 
 
    } 
 
}

にすることはできができleft buttonアイコンを私が追加したものに変更してくださいmenu on Page1およびarrow-backアイコンon Page2

が反応し、ネイティブでの引き出しの完全な実施のために、このリンクを参照してください:答えを Navigation Drawer

+0

おかげでこれをしようとします。 –

+0

@GKTHEBOSS:それはあなたのために働く場合は、私に知らせてください。 – BK19

関連する問題