リアナビゲーション・ドロワーと静的タブ・ナビゲーション

Question

私はリアクション・ナビゲーターからリアクション・ナビゲーションに切り替えていますが、実際はこのアプローチでは問題ありませんが、1つの問題で苦労しています。

引き出しナビゲーションと下揃えのタブナビゲーションを使いたいです。 この部分は期待どおりに動作していますが、問題はありません。

私はタブ付きのナビゲーションを3つのボタンで固定して、アプリ全体に同じアクションを持たせたいと考えています。 （ダッシュボード/検索/お気に入りなど）

ダッシュボードから、1つ上のレベルまでナビゲートできます。私が今やっているように、タブのラベルは以前は "ダッシュボード"に変更されたアイテムの名前に変更されます。

を明確にするために、Dashboard-Screen-Tabでスタックナビゲーションを追加しました。ユーザーはそのページをナビゲートできます。

タブのスタック内を移動中にタブのラブやアクションが変更されないようにするにはどうすればよいですか？ 基本的には、各画面で固定タブナビゲーションが必要です。

これを達成するために固定Viewコンポーネントを作成する必要がありますか？ここで

は私の設定です：this issueによると App.js

 const MetaTabNavigator = TabNavigator({ 
     Dashboard: { 
      screen: MachineNavigator 
     }, 
     Search: { screen: SearchScreen }, 
     Favourites: { screen: FavouritesScreen }, 
    }, 
     { 
      tabBarPosition: Platform.OS === "ios" ? 'bottom' : 'top', 
      animationEnabled: true, 
      tabBarOptions: { 
       activeTintColor: STYLES.HIGHLIGHT_COLOR 
      }, 
      swipeEnabled: false, 
      backBehavior: 'none' 

     }); 

    const MetaDrawerNavigator = DrawerNavigator({ 
     Home: { 
      screen: MetaTabNavigator, 
      navigationOptions: { 
       drawer: { 
        label: 'Drawer', 
        icon: ({ tintColor }) => <Icon name="rocket" size={24} /> 
       }, 
      }, 
     } 
    }, 
     { 
      contentComponent: props => <Menu {...props} /> 
     } 
    ); 


    AppRegistry.registerComponent('myApp',() => MetaDrawerNavigator); 

MachineNavigator

 const MachineNavigator = StackNavigator({ 
     Main: { 
      screen: MachineOverview, 
      navigationOptions: ({ navigation }) => ({ 
       title: "Dashboard", 
       headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}> 
         <IOSIcon name="ios-menu" size={30} /> 
        </TouchableOpacity> 
       ), 
       headerStyle: { paddingRight: 10, paddingLeft: 10 } 
      }) 
     }, 
     Category: { 
      screen: Category, 
      navigationOptions: (props) => ({ 
       title: "Kategorie", 
      }) 
     }, 

     ItemDetail: { 
      screen: ItemDetail, 
      navigationOptions: (props) => ({ 
       title: "Video", 
      }) 
     } 
    }) 

    export default MachineNavigator; 

Answer 1

は、あなたがタブの設定にラベルを制御するtabBarLabelプロパティを追加することができます。

const MetaTabNavigator = TabNavigator({ 
    Dashboard: { 
     screen: MachineNavigator, navigationOptions: {tabBarLabel: 'Dashboard'} 
    }, 
    ...