反应本机反应导航抽屉未打开

Question

我正在使用 react-navigation 作为我的 react native 应用程序的导航包。并且还安装和配置了 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
 },

而且MAIN STACK也包含了几个TAB STACK，我想知道为什么抽屉没有反应

我用来打开抽屉的密码是

this.props.navigation.openDrawer();

bu 上面的代码给出了

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 将作为屏幕之一显示在抽屉中。所以创建一个 class 和 return null 然后将它传递给 Drawer 标签。

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

现在您可以调用 this.props.navigation.openDrawer();应用程序上的任何位置。让我知道它是否有效。

Answer 2

我认为你可以使用另一种简单的方法来处理这个问题:

您可以使用 this link 中提供的 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
 },

现在假设这是您的主页：

主页

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> 如何像 :

抽屉组件：

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>
    )
  }
}

这对我来说很好，我希望这对你也有用。

此致。

反应本机反应导航抽屉未打开

React native react-navigation drawer not opening

navigation-drawer

react-native

react-navigation

AppStack：

首页导航

主页

抽屉组件：