标题中 React Native 中带有堆栈的抽屉导航器

Question

我对 React Navigation 感到困惑。我需要一个没有抽屉的登录屏幕，而在应用程序的其余部分，我需要抽屉导航。

我正在寻找一种解决方案，我可以在一个地方编写代码并适用于整个应用程序。

所以我创建了一个堆栈导航器，其中包含

的路径

 createStackNavigator({
  LoginRT:{
    screen:Login
  },
  HomeRT:{
    screen:Home
  },
  ContactRT:{
    screen:Contact,
    navigationOptions: {
      headerRight: (
        <Text></Text>
      )
    }
  },
 HaulerSelectionRT:{
    screen:HaulerSelection
  }

},
{
  initialRouteName: 'LoginRT',
  /* The header config from HomeScreen is now here */
  defaultNavigationOptions : ({ navigation}) => ({

    headerStyle: {
      backgroundColor: "#3B9EC1",
      color: 'white',
      fontSize: 16, 

    },
    headerTitleStyle: {

      fontWeight: 'bold',
      fontSize: 20,     
      textAlign:"center", 
        flex:1 

    },
    // headerRight: (
    //   <Icon
    //   size={30}
    //     name="bars"
    //     style={{ paddingRight: 5 }}
    //     onPress={() => navigation.openDrawer()}
    //   />

   // ),
    // headerLeft: <Text onPress={() => 
    //   navigation.navigate('LoginRT')}>Menu</Text>,


    headerTintColor: "#fff",
    animationEnabled: true
  })
}
);

一个用于抽屉导航

const DrawerStack = createDrawerNavigator(
  {
    LoginRoute: Login,
    Hauler: HaulerSelection,
  },
  {
    initialRouteName: 'LoginRoute',
    drawerPosition: 'left',

  // navigationOptions: {navigationOptions

  //    },
   }
  );

然后我在 Appcontainer 中都注册了

const AppContainer = createAppContainer(MyRoutes,DrawerStack);

但 DrawerNavigation 不起作用。

我的疑问是，我的方法是否正确？或者还有其他方法可以达到同样的效果。

请帮忙。

Answer 1

header 部分是默认添加的，是可以避免的。 您可以使用以下代码来实现此目的。

 navigationOptions: {
        header: null
   }

此导航选项可以是特定于屏幕的，也可以是所有屏幕通用的。