Question

我正在使用DrawerNavigator标头和堆栈导航。抽屉打开时，它不会与割台重叠。这是我的代码

const AppDrawer = DrawerNavigator(
  {
    Home: {
      path: '/',
      screen: WelcomeContainer,
    },
    Category: {
      path: '/sent',
      screen: CategoryContainer,
    },
  },
  {
    initialRouteName: 'Home',
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);


const AppNavigator = StackNavigator({
  Home: {
    screen: AppDrawer,
    navigationOptions: ({navigation}) => ({
      headerLeft:
       <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}>
      <Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center',
        paddingLeft:10,
        paddingRight:80 }} onPress={ () => navigation.navigate('DrawerOpen') } />
      <ChangeLanguage style={{ margin: 30 , padding: 30}} />
      </View>,
      headerRight: 
      <HeaderUserInformation />,
    })
  },
  Settings: {
  screen: SettingsContainer,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
},
  About: {
  screen: About,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
}
})

我找到了同样问题的不同线程。我试图将DrawNavigator移到顶层，我的代码变为：

const AppNavigator = StackNavigator({
  Home: {
    screen: WelcomeContainer,
    navigationOptions: ({navigation}) => ({
      headerLeft:
       <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}>
      <Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center',
        paddingLeft:10,
        paddingRight:80 }} onPress={ () => navigation.navigate('DrawerOpen') } />
      <ChangeLanguage style={{ margin: 30 , padding: 30}} />
      </View>,
      headerRight: 
      <HeaderUserInformation />,
    })
  },
  Settings: {
  screen: SettingsContainer,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
},
  About: {
  screen: About,
  navigationOptions: ({navigation}) => ({
    title: navigation.state.params.title
  })
}
})



const AppDrawer = DrawerNavigator(
  {
    Home: {
      path: '/',
      screen: AppNavigator,
    },
    Category: {
      path: '/sent',
      screen: CategoryContainer,
    },
  },
  {
    initialRouteName: 'Home',
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);

现在抽屉与标题重叠，但标题从其他组件中消失：如果我点击抽屉上的元素，例如设置，则此屏幕上不再有标题。如何正确解决这个重叠问题？

Answer 1

DrawerNavigator必须是最外面的导航器，以便它与标题重叠，并且每个内部屏幕必须在StackNavigator中声明，如下所示

ERROR Error: InvalidPipeArgument: 'Invalid Date' for pipe 'DatePipe'
at invalidPipeArgumentError (common.es5.js:2610)

抽屉头不与StackNavigator头重叠

1 个答案: