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();

上面的代码给出了

this.props.navigation.openDrawer（）未定义

当我提到的上述崩溃发生时

作为我使用的修复程序，

import { DrawerActions } from "react-navigation";

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

在用户几次经过STACK导航后，上面的代码也将停止工作，但不会给开发带来任何错误。

此错误在生产和开发中均会发生

当前正在运行原生反应：0.59.8 反应：16.8.3 反应导航：3.9.1， react-native-gesture-handler：1.1.0，

任何帮助将不胜感激，预先感谢

Answer 1

尝试使用Drawer导航包装所有堆栈导航。

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将在抽屉中显示为屏幕之一。因此，创建一个类并返回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>的样子：

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

这对我有用，我希望这对您也有用。

最诚挚的问候。

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

2 个答案:

AppStack：

家庭导航

主页

DrawerComponent：