this.props.navigation.toggedrawer не является функцией-React Native 0.59.9 React Navigation 3.11.0

Question

У меня есть требование использовать Redux в Tabnavigator, который находится внутри Часть 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())