Реактивный ящик реакции-навигации не открывается

Question

Я использую реагирующую навигацию в качестве навигационного пакета для моего собственного реактивного приложения. а также установили и настроили react-native-gesture-handler вместе с react-navigation, как указано в документации.

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

так я настроил навигацию,

ГЛАВНАЯ НАВИГАЦИЯ СТЕКА

const AppStack = createStackNavigator(
 {
   DrawerNav: DrawerNav,
   Home: Home,
   Notification: Notification,
   HomeSearch: HomeSearch
 }

ДРАЙВЕР НАВИГАЦИЯ

const MyDrawerNavigator = createDrawerNavigator(
 {
   Home: Home,
   MyAccount: MyAccount,
   ContactUs: ContactUs,
   InviteFriend: InviteFriend,
   Terms: Terms,
   SignOut: SignOut
 },

И ГЛАВНЫЙ СТЕК также содержит несколько СТЕКБА, Я хочу знать, почему ящик не отвечает.

Код, который я использовал, чтобы открыть ящик, был

this.props.navigation.openDrawer();

бу вышеуказанный код дал

this.props.navigation.openDrawer () undefined

когда вышеупомянутый сбой, о котором я упоминал, происходит

как исправление я использовал,

import { DrawerActions } from "react-navigation";

this.props.navigation.dispatch(DrawerActions.openDrawer())

приведенный выше код также перестает работать после того, как пользователь несколько раз проходит навигацию по STACK, но не выдает никаких ошибок при разработке.

Эта ошибка возникает как на производстве, так и на разработке

в данный момент работает реагировать родной: 0.59.8 реагировать: 16.8.3 реагировать на навигацию: 3.9.1, реагировать-нативный-жест-обработчик: 1.1.0

любая помощь будет высоко ценится, Заранее спасибо

Answer 1

Попробуйте обернуть все стеки навигации с помощью навигации по ящику.

const StackNav = createStackNavigator({
  Home: Home,
  Notification: Notification,
  HomeSearch: HomeSearch
}

Теперь оберните вышеупомянутое с помощью навигации по ящику

const AppStack = createDrawerNavigator({
  StackNav: {
    screen: StackNav,
    navigationOptions: {
      drawerLabel: <Hidden />,
    },
  },
  Home: Home,
  MyAccount: MyAccount,
  ContactUs: ContactUs,
  InviteFriend: InviteFriend,
  Terms: Terms,
  SignOut: SignOut
});

Теперь StackNav будет отображаться в ящике в качестве одного из экранов. Поэтому создайте класс и верните ноль, а затем передайте его метке Drawer.

class Hidden extends Component {
  render() {
    return null;
  }
}

Теперь вы сможете вызывать this.props.navigation.openDrawer (); в любом месте приложения. Дайте мне знать, если это работает.

Answer 2

Я думаю, вы можете использовать другой простой способ решения этой проблемы:

Вы можете использовать react-native-drawer, который доступен в по этой ссылке Теперь я собираюсь показать вам, как выможет работать с ним:

AppStack:

const AppStack = createStackNavigator(
 {
   Home: Home,
   Notification: Notification,
   HomeSearch: HomeSearch
 }

Домашняя навигация

const MyHomeNavigator = createStackNavigator(
 {
   Home: Home,
   MyAccount: MyAccount,
   ContactUs: ContactUs,
   InviteFriend: InviteFriend,
   Terms: Terms,
   SignOut: SignOut
 },

Теперь давайте предположим, что это ваша домашняя страница:

HomePage

import Drawer from 'react-native-drawer'
import DrawerComponent from '../components/drawer'

export default class HomePage extends Component{
  render() {
    return (
      <Drawer  ref={(ref) => this._drawer = ref} content={<DrawerComponent  {...this.props}/>} side='right' captureGestures openDrawerOffset={0.3} acceptTap>
        //your home page components
      </Drawer>
    )
  }
}

Как вы можете видеть, вы можете получить доступ к ящику по this._drawer, и здесь я покажу вам, как <DrawerComponent> нравится:

DrawerComponent:

export default class DrawerComponent extends React.Component {
  navigateTo = (path) => {
      this.props.navigation.navigate(path)
  }
  render(){
    return(
      <View>            
        <View>
          <Item path='MyAccount' navigate = {this.navigateTo}/>
          <Item path='ContactUs' navigate = {this.navigateTo}/>
          <Item path='InviteFriend' navigate = {this.navigateTo}/>
          //And you add all the item you need here with navigateTo function
        </View>
        <View>
          //LogOut Section
        </View>
      </View>
    )
  }
}

Это работает для меня хорошо, я надеюсь, что это работает и для вас.

С уважением.