为什么navigation.closeDrawer不是函数？

Question

依赖版本:

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

我react-navigation用来浏览我的屏幕,我创建了两个屏幕和一个抽屉

Router.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

这是我的DrawerPanel.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();另一个屏幕不允许使用this.props.navigation.closeDrawer();

我尝试进行更改以使用this.props.navigation.actions.closeDrawer();将显示的错误Cannot read property 'closeDrawer' of undefined.

我犯了什么错？任何帮助,将不胜感激.提前致谢.

Answer 1

试试这个

import { DrawerActions } from 'react-navigation';

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

Answer 2

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

请记住，我们现在有两个版本的 react-navigation（v1 和 v2），因此您应该仔细阅读文档。

请尝试使用这个：

• 关闭抽屉

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

• 打开抽屉：

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

请注意在 Internet 上参考此库的任何错误修复，您必须知道使用的是哪个版本。

• 注意嵌套的顺序——如果堆栈导航器不在抽屉里面，它就不会有 openDrawer 函数。

  我想在这种情况下它会为你工作。

欢呼！