代码之家  ›  专栏  ›  技术社区  ›  Morton

为什么是导航。closeDrawer不是一个功能?

  •  7
  • Morton  · 技术社区  · 7 年前

    依赖项版本:

    "dependencies": {
        "react": "16.3.1",
        "react-native": "~0.55.2",
        "react-navigation": "^2.0.1",
      }
    

    我用 react-navigation 为了在屏幕上导航,我创建了两个屏幕和一个抽屉

    路由器。js:

    import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
    import MainActivity from './components/MainActivity';
    import ThisWeek from './components/ThisWeek';
    import DrawerPanel from './components/DrawerPanel';
    
    const Stack = createStackNavigator({
      MainActivity: {
        screen: MainActivity,
        navigationOptions: {
          title: 'Welcome',
          headerStyle: {
            backgroundColor: '#81A3A7', 
            elevation: null
          }
        }
      },
      ThisWeek: {
        screen: ThisWeek
      }
    },
    {
      initialRouteName: 'MainActivity'
    }
    );
    
    const Router = createDrawerNavigator({
        FirstScreen: {
          screen: Stack
        }
      },
      {
        contentComponent: DrawerPanel,
        drawerWidth: 200
      });
    
    export default Router;
    

    在我的 DrawerPanel.js 我可以点击两个按钮导航到屏幕,但是当我尝试使用 this.props.navigation.closeDrawer(); 这说明了一个错误 _this2.props.navigation.closeDrawer is not a function .

    所以我试着 console.log(this.props); ,我看得出来 openDrawer closeDrawer 在下面 navigation enter image description here

    这是我的抽屉板。js:

    import React, { Component } from 'react';
    import { ScrollView, FlatList, Text } from 'react-native';
    import { View } from 'react-native-animatable';
    import { List, Button } from 'react-native-elements';
    
    class DrawerPanel extends Component {
    
      render() {
        console.log(this.props);
        return (
          <ScrollView style={{ backgroundColor: '#81A3A7' }}>
    
            <Button
              onPress={() => {
                this.props.navigation.actions.closeDrawer();
                this.props.navigation.navigate('MainActivity');
              }}
              backgroundColor={'#81A3A7'}
              containerViewStyle={{ width: '100%', marginLeft: -61 }}
              title='Main page' 
            />
            <Button
              onPress={() => this.props.navigation.navigate('ThisWeek')}
              backgroundColor={'#81A3A7'}
              containerViewStyle={{ width: '100%', marginLeft: -46 }}
              title='This weel'
            /> 
          </ScrollView>
        );
      }
    }
    
    export default DrawerPanel;
    

    我不明白为什么我可以用 this.props.navigation.navigate(); 到另一个屏幕不允许使用 这道具。航行closeDrawer();

    我试着改变一下使用 this.props.navigation.actions.closeDrawer(); 错误会显示出来 Cannot read property 'closeDrawer' of undefined .

    我犯了什么错?任何帮助都将不胜感激。提前谢谢。

    4 回复  |  直到 7 年前
        1
  •  22
  •   digit    7 年前

    试试这个

    import { DrawerActions } from 'react-navigation';
    
    this.props.navigation.dispatch(DrawerActions.closeDrawer());
    this.props.navigation.dispatch(DrawerActions.openDrawer());
    
        2
  •  5
  •   nahoang    6 年前

    您同时使用StackNavigator和DrawrNavigator,因此使用它们的方式略有不同。

    请记住,我们现在有两个版本的react导航(v1和v2),因此您应该仔细阅读文档。

    请尝试使用这个:

    • 封闭抽屉

      this.props.navigation.navigate('DrawerClose'); //对于版本1 this.props.navigation.openDrawer(); //第二版

    • 打开抽屉:

      this.props.navigation.navigate('DrawerOpen'); //对于版本1 this.props.navigation.closeDrawer(); //第二版

    请小心参考internet上此库的任何错误修复,您必须知道使用的是哪个版本。

    • 请注意嵌套顺序——如果堆栈导航器不在抽屉内,它将不具有openDrawer功能。

      我想在这种情况下对你有用。

    欢呼

        3
  •  1
  •   Anthony    5 年前

    在你的抽屉面板文件里。您没有使用构造函数。因此,组件的道具不知道DrumerNavigator传入的导航道具。尝试将其放在组件中的渲染函数之前。

    constructor(props){
      super(props);
    }
    

    这样,您将不再需要使用dispatch(),而是使用openDrawer()和closeDrawer()。

        4
  •  0
  •   Keshav Gera    5 年前
    import {DrawerItems,DrawerActions} from 'react-navigation-drawer';
    
    this.props.navigation.dispatch(DrawerActions.closeDrawer());
    this.props.navigation.dispatch(DrawerActions.openDrawer());