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

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

<button id="toggleMessage">
Toggle Message
</button>
<div id="floating-bubble">
<div id="floating-message">Hello There , chat with us!</div>
</div>

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

标头中有React Native中带有堆栈的Drawer Navigator

1 个答案: