在DrawerNavigator中隱藏標題（反應導航）

Question

惠..

我目前正在玩反應導航，試圖解決抽屜打開時標題沒有隱藏的問題...

我希望任何人都可以分享如何解決這個錯誤的標題。.在我將我的DrawerNavigator的代碼集成附加到StackNavigator之下。

 const Home = DrawerNavigator({ HomeMenu: { screen: HomeMenu }, Messages: { screen: Messages }, Notifications: { screen: Notifications }, Badges: { screen: Badges }, Leaderboard: { screen: Leaderboard }, Profile: { screen: Profile }, Logout: { screen: Logout } }); const MainActivity = StackNavigator({ Home: { screen: Home } }) 

先感謝您！

Answer 1

您可以隱藏標題，例如：

const Home = DrawerNavigator({
  HomeMenu: { screen: HomeMenu,
    navigationOptions: {
          header:false, //hide header if not needed so whole screen slide  

    },
},
  Messages: { screen: Messages },
  Notifications: { screen: Notifications },
  Badges: { screen: Badges },
  Leaderboard: { screen: Leaderboard },
  Profile: { screen: Profile },
  Logout: { screen: Logout }
});

const MainActivity = StackNavigator({
  Home: { screen: Home }
})

Answer 2

我遇到了同樣的問題（TabNav嵌套在DrawerNav中），發現了一個我想分享的超級簡單的修復程序！ 這個問題討論了這里 ，在回購的react-navigation 。 我實施的修復（要隱藏的屏幕上）：

MAIN: {
  screen: MainTabs,
  navigationOptions: {
    drawerLabel: () => null // to hide this header
},

}，

版本略有不同：

static navigationOptions = {
drawerLabel: () => null

}

希望這可以幫助！

Answer 3

在DrawerNavigator中使用StackNavigator並將headerMode: 'none'為root StackNavigator

const MenuStackNavigator = StackNavigator({
  Dashboard: { 
    screen: Dashboard, 
    navigationOptions: {
      title: 'Dashboard',
    }
  },
});
const PagesStackNavigator = StackNavigator({...});

const DrawerNavigator = DrawerNavigator({
  MenuStack: { 
    screen: MenuStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'MenuStackNavigator',
      })
    },
  },
  Pages: { 
    screen: PagesStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'PagesStackNavigator',
      })
    },
  }
});

const AppNavigator = StackNavigator({
  Drawer: { screen: DrawerNavigator },
}, {
  headerMode: 'none',
});

Answer 4

我找到了方法，我只需要做另一種方法即可。將DrawerNavigator設置為根導航器，然后將StackNavigator放入其中。然后打開抽屜時將沒有標題

Answer 5

我也在解決這個問題，發現StackNavigator必須嵌套在Drawer一個內部，但是與此解決方案有很多問題，例如同步抽屜和卡片堆棧中的活動菜單狀態。

// Manifest of possible screens

const MenuButton = ({ navigation }) => (
    <View>
        <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
            <Icon name="bars" style={{color: 'white', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
    </View>
);

const Nav = StackNavigator({
  StoriesScreen: {
    screen: StoriesScreen,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
}, {
  navigationOptions: {
    header: navigation => ({
      style: styles.header,
      left: <MenuButton navigation={navigation} />,
    }),
  }
})

const PrimaryNav = DrawerNavigator({
  StoriesScreen: {
    screen: Nav,
    navigationOptions: { title: 'Stories' }
  },
  LaunchScreen: { screen: LaunchScreen },
  LoginScreen: {
    screen: LoginScreen,
    navigationOptions: { title: 'Login' }
  }
})

Answer 6

我也遇到了同樣的問題，並通過在主StackNavigator中添加“ headerMode”：none來解決。

例：

const AppMainStack = DrawerNavigator({
  ActivitiesScreen: {screen: ActivitiesScreen},
}, {
  drawerPosition: 'right',
});

const AppNavigator = StackNavigator({
  StartScreen: {screen: StartScreen},
  EnterCodeScreen: {screen: EnterCodeScreen},
  CreateAccountScreen: {screen: CreateAccountScreen},
  ProfileSetupScreen: {screen: ProfileSetupScreen},
  SignInScreen: {screen: AppMainStack},
}, {
  headerMode: 'none',
});