Навигация в ящике не отображается. На самом деле, Cannot вызвать класс как функцию появляется

Question

здесь у меня проблема в моей программе. Я хочу вызвать боковое меню в левой части экрана страницы Cases2. js, нажав кнопку OpenDrawernya . Но когда я нажимаю кнопку, появляется ошибка Невозможно вызвать класс как функцию . Я не знаю, какая часть моего сценария неверна. Пожалуйста, помогите мне исправить этот

ящик. js

import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, TextInput, Button} from 'react-native';
import NewCases from '../pages/NewCases';
import Inbox from '../pages/Inbox';
import Draft from '../pages/Draft';
import LaporanBirt from '../pages/LaporanBirt';
import {createDrawerNavigator, createAppContainer} from 'react-navigation';

const Navigasinya = createDrawerNavigator({
    NewCases: {
        screen: NewCases
    },
    Inbox: {
        screen: Inbox
    },
    Draft: {
        screen: Draft
    },
    LaporanBirt: {
        screen: LaporanBirt
    },
})

const DrawerPages = createAppContainer(Navigasinya);

export default DrawerPages;

Cases2. js

import React, { Component } from 'react';
import { Text, View, StyleSheet, SafeAreaView, Image, TouchableOpacity, ScrollView, Dimensions, Modal, Alert, BackHandler } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Fonts } from '../utils/Fonts';
import Wallpaper2 from '../components/Wallpaper2';
import SimpleModal from '../components/SimpleModal';
import DrawerPages from '../components/Drawer';

export default class Cases2 extends Component {

  constructor(props) {
    super(props)

    this.state = {
      tokens: this.props.Tokennya,
      user: this.props.userName,
      pass: "",
      role: "",
      tokennya: [],
      alluser: [],
      user_role: [],
      ussr_role: "",
      error: "",
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height,
      isModalVisible: false,
    };
    Dimensions.addEventListener('change', (e) => {
      this.setState(e.window);
    });
  }

  changeModalVisibility = (bool) => {
    this.setState({ isModalVisible: bool });
  }

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
    fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/extrarest/login-user', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept-Encoding': 'gzip, deflate',
        'Authorization': 'Bearer ' + this.state.tokens,
      },
    }).then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({
          alluser: responseJson,
        });
        this.getUserRole(this.state.alluser.uid);
      });

  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

  handleBackPress = () => {
    return true;
  }

  getUserRole = (userID) => {
    fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/user/' + userID, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept-Encoding': 'gzip, deflate',
        'Authorization': 'Bearer ' + this.state.tokens,
      },
    }).then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          user_role: responseJson
        });
        if (this.state.user_role.usr_role == 'PROCESSMAKER_ADMIN')
          this.setState({
            ussr_role: 'Administrator'
          })
        else if (this.state.user_role.usr_role == 'PROCESSMAKER_OPERATOR')
          this.setState({
            ussr_role: 'Operator'
          })
        else if (this.state.user_role.usr_role == 'PROCESSMAKER_MANAGER')
          this.setState({
            ussr_role: 'Manager'
          })
      })
  }



  onTaskPressed() {
    Actions.newcases({ "Tokennya": this.state.tokens })
  }
  onDraftPressed() {
    Actions.draft({ "Tokennya": this.state.tokens })
  }
  onInboxPressed() {
    Actions.inbox({ "Tokennya": this.state.tokens })
  }
  onLaporanPressed() {
    Actions.LaporanBirt({ "Tokennya": this.state.tokens, "NIP": this.state.alluser.position, "Dept": this.state.alluser.departmentname, "Group": this.state.alluser.zipcode})
  }
  onPausedPressed() {
    Actions.paused({ "Tokennya": this.state.tokens })
  }
  onUnassignedPressed() {
    Actions.unassigned({ "Tokennya": this.state.tokens })
  }

  showAlertLogout = () => {
    Alert.alert(
      'Konfirmasi',
      'Apakah ingin logout ?',
      [
        { text: 'Cancel', onPress: () => console.log('Ask me later pressed') },
        { text: 'OK', onPress: () => Actions.login2() },
        { text: 'CHANGE PASSWORD', onPress: () => Actions.GantiPass({ "Tokennya" : this.state.tokens}) },
      ],
      { cancelable: false },
    );
  }

  render() {
    return (
      <Wallpaper2>
        <View style={[styles.shape2, { width: this.state.width }]}>
          <Text style={styles.asihPutera}> ASIH PUTERA </Text>
          <TouchableOpacity onPress={DrawerPages}>
            <Text>OpenDrawernya</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.showAlertLogout.bind(this)} style={[styles.touchableHighlight]}>
            <View style={{ flexDirection: 'column' }}>
              <Text style={styles.usernamenya}>{this.state.alluser.username}</Text>
              <Text style={styles.logIn}>{this.state.ussr_role}</Text>
            </View>
            <Image style={styles.iconLogin} source={require('../images/Person.png')} />
          </TouchableOpacity>
          <Modal transparent={true} visible={this.state.isModalVisible} onRequestClose={() => this.changeModalVisibility(false)}
            animationType='slide'>
            <SimpleModal changeModalVisibility={this.changeModalVisibility} />
          </Modal>
        </View>
        <Text style={styles.cases}> MENU </Text>
        <ScrollView>
          <View style={{ flex: 1, justifyContent: 'center', alignSelf: 'center' }}>
            <View style={{ flexDirection: 'row', justifyContent: 'center', flex: 1 }}>
              <TouchableOpacity onPress={this.onTaskPressed.bind(this)}>
                <Image style={styles.newcase} source={require('../images/Newcase.jpeg')} />
              </TouchableOpacity>
              <TouchableOpacity onPress={this.onInboxPressed.bind(this)}>
                <Image style={styles.inbox} source={require('../images/Inbox.jpeg')} />
              </TouchableOpacity>
            </View>
            <View style={{ flexDirection: 'row', justifyContent: 'center', flex: 1 }}>
              <TouchableOpacity onPress={this.onDraftPressed.bind(this)}>
                <Image style={styles.newcase} source={require('../images/Draft.jpeg')} />
              </TouchableOpacity>
              <TouchableOpacity onPress={this.onLaporanPressed.bind(this)}>
                <Image style={styles.inbox} source={require('../images/Report.jpeg')} />
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </Wallpaper2>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  home: {
    width: 50,
    height: 50,
  },
  laporan: {
    width: 50,
    height: 50,
  },
  setting: {
    width: 133,
    height: 45,
    color: '#015c6f',
    fontFamily: Fonts.Lato2,
    fontSize: 18,
    fontWeight: '700',
    lineHeight: 43.2,
    marginLeft: 145
  },
  shape2: {
    width: 723,
    height: 40,
    backgroundColor: '#00ffc6',
  },
  asihPutera: {
    marginTop: 5,
    marginLeft: 10,
    color: '#015c6f',
    fontFamily: Fonts.Lato,
    fontSize: 20,
    fontWeight: 'bold',
    fontStyle: 'italic',
  },
  logIn: {
    color: '#0d535d',
    fontSize: 8,
    fontFamily: Fonts.Lato3,
    alignSelf: 'flex-end',
  },
  usernamenya: {
    color: '#0d535d',
    fontSize: 15,
    marginTop: -30,
    marginLeft: 100,
    fontFamily: Fonts.Lato3,
  },
  iconLogin: {
    width: 50,
    height: 50,
    marginTop: -38,
  },
  madrasah: {
    color: '#015c6f',
    fontFamily: Fonts.Lato4,
    fontSize: 30,
    textAlign: 'center',
    marginTop: 10,
  },
  shape3: {
    width: 723,
    height: 50,
    alignSelf: 'flex-end',
    backgroundColor: '#00ffc6',
    flexDirection: 'row',
  },
  shape4: {
    marginTop: 15,
    width: 290,
    height: 120,
    borderRadius: 10,
    borderColor: '#707070',
    borderStyle: 'solid',
    borderWidth: 1,
    backgroundColor: '#015c6f',
    //marginLeft: 35,
    alignSelf: 'center'
  },
  daycare: {
    color: '#feffff',
    fontFamily: Fonts.Lato3,
    fontSize: 18,
    textAlign: 'center',
    marginTop: 30,
  },
  aliyah: {
    color: '#feffff',
    fontFamily: Fonts.Lato3,
    fontSize: 18,
    textAlign: 'center',
    marginTop: 20,
  },
  newcase: {
    width: 120,
    height: 120,
    marginTop: 45,
  },
  inbox: {
    width: 120,
    height: 120,
    marginTop: 45,
    marginLeft: 60,
  },
  keuangan: {
    width: 100,
    height: 100,
    marginTop: 90,
    marginLeft: 40,
  },
  akademik: {
    width: 100,
    height: 100,
    marginTop: 90,
    marginLeft: 80,
  },
  cases: {
    color: '#015c6f',
    fontFamily: Fonts.Lato,
    fontSize: 30,
    marginTop: 30,
    fontStyle: 'italic',
    fontWeight: 'bold',
    alignSelf: 'center',
  },
  touchableHighlight: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
  }
});

Я надеюсь найти решение здесь, спасибо

Answer 1

Может быть, этот код:

onPress={this.onLaporanPressed.bind(this)}>

Должен быть

onPress={() => this.onLaporanPressed()>

И сделать привязку в конструкторе

constructor(props) {
  this.onLaporanPressed = this.onLaporanPressed.bind(this)
}

Этот метод для всех ваших встроенных событий слушателей.