Почему 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

Вы используете и StackNavigator, и DrawrNavigator, так что способ их использования немного отличается.

Имейте в виду, у нас есть две версии для реагирования-навигации (v1 и v2), так что выследует внимательно прочитать документацию.

Пожалуйста, попробуйте использовать это:

• Закрыть ящик

  this.props.navigation.navigate('DrawerClose'); // для версии 1 this.props.navigation.openDrawer(); //для версии 2

• Открыть ящик:

  this.props.navigation.navigate('DrawerOpen'); // для версии 1 this.props.navigation.closeDrawer(); // для версии 2

Будьте осторожны, чтобы ссылаться на любые исправления ошибок для этих библиотек в Интернете, которые вы должны знать, в какой версии используется.

• Обратите внимание, что порядок вложения - если навигатор стекане внутри ящика, у него не будет функции openDrawer.

  Полагаю, в этом случае это сработает.

Приветствие!

Answer 2

В вашем файле DrawerPanel.Вы не использовали конструктор.Следовательно, реквизиты вашего компонента не знали о реквизитах навигации, которые передал DrawerNavigator. Попробуйте поместить это перед функцией рендеринга в компоненте.

constructor(props){
  super(props);

}

Таким образом, вам больше не нужно использовать dispatch (), а вместо этого используйте openDrawer () и closeDrawer ().

Answer 3

Попробуйте это

import { DrawerActions } from 'react-navigation';

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