反應導航抽屜和靜態選項卡導航

我從反應導航器切換到反應導航，我實際上很好用這種方法，但與一個問題struggeling。反應導航抽屜和靜態選項卡導航

我想使用抽屜導航和底部對齊的Tab-Navigation。這部分按預期工作 - 這裏沒有問題。

我想用3個按鈕固定標籤導航，這些按鈕在整個應用程序中會有相同的動作。（例如，儀表板/搜索/收藏夾）

從儀表板可以更深入地瀏覽一個級別。正如我現在所做的那樣，選項卡以前的「儀表板」的標籤更改爲導航到的項目的名稱。

爲了澄清，我在Dashboard-Screen-Tab中添加了一個堆棧導航，因此用戶可以瀏覽該頁面。

如何防止在標籤堆棧內導航時更改標籤的實驗室和操作？基本上我想要在每個屏幕上固定的Tab鍵導航。

我應該創建一個固定的視圖組件來實現它嗎？

這裏是我的設置： 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;

來源

2017-09-26 user2262261

據this issue，您可以添加到標籤配置tabBarLabel屬性來控制標籤：

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

來源

2017-09-26 18:51:25 Kraylog

反應導航抽屜和靜態選項卡導航

回答

相關問題