this.props.navigation.toggedrawer不是一个函数-React Native 0.59.9 React Navigation 3.11.0

Question

  

我需要在Tabnavigator中使用Redux，它位于   DrawerNavigator.Redux部分工作正常，但是我无法   单击按钮即可打开抽屉，但抽屉可见   滑动手势。

     

我正在提供我的代码：-

App.js：-

import * as React from 'react';
import {createAppContainer,createStackNavigator,createBottomTabNavigator} from 'react-navigation';

import RegisterStack from './routes/Register.route';
import SplashStack from './routes/Splash.route';
import Test from './src/pages/Test';

const AppNavigator = createStackNavigator(
  {
    Splash:  SplashStack,
    Register:  RegisterStack,
    StartTest :Test
  },
  {
    initialRouteName: 'StartTest',
    headerMode:'none'
  });

  let Navigation = createAppContainer(AppNavigator);



  export default class App extends React.Component {
    render() {
      return (
        <Navigation />
      );
    }
  }

Test.js中的代码：-

import React from 'react';
import { View,StyleSheet,Text,SafeAreaView,Dimensions,Button } from 'react-native';
import {createAppContainer,createMaterialTopTabNavigator,createDrawerNavigator, DrawerActions} from 'react-navigation';
import ReferenceStack from './Reference';
import QuestionStack from './Question';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';

function counter(state, action) {
  if (typeof state === 'undefined') {
    return 0;
  }

  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

let store = createStore(combineReducers({ count: counter }));
class DrawerLayout extends React.Component {
  constructor(props) {
      super(props);
  }

  render() {
      return (
          <SafeAreaView style={styles.container}>
              <Text>{this.props.count}</Text>
              <Button
                title="Increment"
                onPress={() => this.props.dispatch({ type: 'INCREMENT' })}
              />
          </SafeAreaView>
      )
  }
}

const styles = StyleSheet.create({
  container: {
      flex:1,
      backgroundColor: "red",
  }
});
let CounterContainer = connect(state => ({ count: state.count }))(ReferenceStack);
let StaticCounterContainer = connect(state => ({ count: state.count }))(QuestionStack);
let StaticCounterContainerDrawer = connect(state => ({ count: state.count }))(DrawerLayout);


const DrawerStack = createDrawerNavigator({
  Test: {
      screen: createMaterialTopTabNavigator({

          Reference: {
              screen: CounterContainer
          },
          Question:{
              screen: StaticCounterContainer
          }
      },{
          tabBarPosition: 'bottom',
          tabBarOptions:{
              activeTintColor:'#d61822',
              inactiveTintColor:'#5e5e5e',
              pressColor:'#d61822'
          }
      })
  }
},{
  drawerPosition: "left",
  drawerWidth: Dimensions.get('screen').width*.80,
  contentComponent: StaticCounterContainerDrawer
});

let DrawerTabNavigation =  createAppContainer(DrawerStack);

class Test extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)
  }
    render() {
      return (
        <View style={{flex:1}}>
            <View style={{height:50,backgroundColor:'yellow'}}></View>
              <Provider store={store}>
                <DrawerTabNavigation/>
              </Provider>
            <View style={{height:50,backgroundColor:'yellow'}}>
              <Button
                title="Open Drawer"
                onPress={() => this.props.navigation.toggleDrawer()}
              />
            </View>
          </View>
      );
    }
  }
  export default Test;

  

按下“打开抽屉”按钮时

_this3.props.navigation.toggedrawer不是函数，此错误正在显示。

  

我同时提供了屏幕和错误信息：-

  

请按一下按钮打开我的抽屉。谢谢   前进

Answer 1

this.props.navigation.toggedrawer仅适用于DrawerNavigator中的屏幕。

Answer 2

可以试试看。

import { DrawerActions } from "react-navigation";
this.props.navigation.dispatch(DrawerActions.toggleDrawer())