reactjs - 抽屉未覆盖 react 导航中的标题

Question

嗨 friend 们，过去两天我对 react 导航感到摸不着头脑，我尝试了很多东西(文档对于初学者来说似乎不太清楚)，所以现在我面临着一些对我来说似乎不太复杂的问题因此，我寻求建议和帮助以进一步进行。以下是我寻求帮助的案例/问题/场景 -

1. react-navigation 不覆盖标题和状态栏，我想实现类似 gmail 的功能但我最终得到了 this

我使用以下代码块来达到这一点

import React, {Component} from 'react';
import { AppRegistry, View, BackAndroid, StatusBar,} from 'react-native';
import {
  NavigationActions,
  addNavigationHelpers,
  StackNavigator,
  DrawerNavigator
} from 'react-navigation';


import LandingScreen from 'src/screens/landingScreen';
import Login from 'src/screens/login'
import SignUp from 'src/screens/signUp'
import ForgotPassword from 'src/screens/forgotPassword'
import Dashboard from 'src/screens/dashboard'
import UserProfile from 'src/screens/userProfile'

export const Drawer = DrawerNavigator({
  Dashboard:{
    path:'/',
    screen:Dashboard,
  },
  UserProfile:{
    path:'/'
    screen:UserProfile
  },
}, {
  initialRouteName: 'Dashboard',
  contentOptions: {
    activeTintColor: '#e91e63',
  },
  headerMode: 'screen',
});

const routesConfig = {
  Landing:{screen:LandingScreen},
  Login: { screen: Login },
  SignUp: { screen: SignUp },
  ForgotPassword: { screen: ForgotPassword },
  Drawer:{screen:Drawer}
};

export const AppNavigator = StackNavigator(routesConfig, {
  initialRouteName: 'Drawer'
});
AppRegistry.registerComponent('Riduk', () => AppNavigator);

其他问题是如何在同一屏幕上的应用中添加 2 个抽屉

Answer 1

这是一个简化的示例:

const FooStackNavigator = StackNavigator({
  Foo: { 
    screen: FooScreen, 
    navigationOptions: {
      title: 'Foo',
    }
  },
});
const BarStackNavigator = StackNavigator({...});

const MyDrawerNavigator = DrawerNavigator({
  FooStack: { 
    screen: FooStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'Foo',
      })
    },
  },
  BarStack: { 
    screen: BarStackNavigator,
    navigationOptions: {
      drawer: () => ({
        label: 'Bar',
      })
    },
  }
});

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