React native react-navigation drawer未打开

lnvxswe2 于 12个月前发布在 React

关注(0)|答案(3)|浏览(129)

我使用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
 },

型
和主堆栈也包含了一些标签堆栈也，我想知道为什么抽屉没有React。
我用来打开抽屉的密码是

this.props.navigation.openDrawer();

型
上面的代码给出了
this.props.navigation.openDrawer（）undefined
当我提到的上述崩溃发生时
作为我使用的修复，

import { DrawerActions } from "react-navigation";

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

型
上面的代码也停止工作后，用户通过堆栈导航几次，但不给予任何错误的发展。
此错误在生产和开发中都会发生
当前正在运行react native：0.59.8React：16.8.3React导航：3.9.1，react-native-gesture-handler：1.1.0，
任何帮助都将不胜感激，先谢了

react-native

来源：https://stackoverflow.com/questions/56377475/react-native-react-navigation-drawer-not-opening

3条答案

按热度按时间

ecbunoof1#

尝试使用抽屉导航 Package 所有堆栈导航。

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

字符串
现在用抽屉导航将上面的内容 Package 起来

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

型
现在StackNav将显示在抽屉中作为屏幕之一。所以创建一个类并返回null，然后将其传递给Drawer label。

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

型
现在您可以调用this.props.navigation.openDrawer（）;任何地方的应用程序。如果成功了告诉我。

赞(0）回复(0）举报 12个月前

3qpi33ja2#

我想你可以用另一种简单的方法来处理这个问题：
您可以使用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>
    )
  }
}

型
这对我很好，我希望这对你也有效。
最好的问候。

赞(0）回复(0）举报 12个月前

h9a6wy2h3#

尝试导入'react-native-gesture-handler';在app.js或index.js文件中

赞(0）回复(0）举报 12个月前