Навигатор по ящикам со стеком в React Native в заголовке

У меня возникла путаница по поводу 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 не работает.

Я сомневаюсь, верен ли мой подход? Или есть другой способ добиться того же.

Пожалуйста помоги.


react-native react-native-navigation
person Bharat Joshi    schedule 16.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Часть заголовка добавляется по умолчанию, и ее можно избежать. Для этого можно использовать следующий код.

 navigationOptions: {
        header: null
   }

Эти параметры навигации могут быть либо специфичными для экрана, либо общими для всех экранов.

person wahid_abdul    schedule 16.01.2019
comment
Отображение / скрытие заголовка на другом экране - это нормально, но когда я нажимаю кнопку в разделе заголовка, навигатор ящика не появляется, поэтому первым делом мне нужно подтвердить, верен ли этот подход или нет? - person Bharat Joshi; 16.01.2019
comment
Следуйте этому reactnavigation.org/docs/en/drawer-based-navigation.html Выполнить: this.props.navigation.openDrawer (); (или) this.props.navigation.closeDrawer (); при нажатии кнопки - person wahid_abdul; 16.01.2019