React native react-navigation drawer未打开

lnvxswe2  于 2023-08-07  发布在  React
关注(0)|答案(3)|浏览(178)

我使用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,
任何帮助都将不胜感激,先谢了

ecbunoof

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();任何地方的应用程序。如果成功了告诉我。

3qpi33ja

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


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

h9a6wy2h

h9a6wy2h3#

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

相关问题