React Native 抽屜導航：如何通過單擊特定場景中的自定義按鈕打開抽屜？

Question

我試圖通過單擊特定場景中的以下按鈕（屏幕截圖）來打開抽屜。 當前狀態

這是我的代碼。

// App.js
import React, { Component } from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import SplashScreen from 'react-native-splash-screen'
import RNBootSplash from "react-native-bootsplash"

import MainCategory from './src/Scenes/MainCategory'
import SubCategory from './src/Scenes/SubCategory'
import DetailScene from './src/Scenes/DetailScene'
import Questions from './src/Scenes/Questions'
import Ruleta from './src/Scenes/Ruleta'

import CustomDrawerComponent from './src/Components/CustomDrawerComponent'

export default class MainRouter extends Component {
  componentDidMount() {
      SplashScreen.hide()
      RNBootSplash.hide({ duration: 250 })
  }
  render() {
    const StackNavigator = createStackNavigator({
      MainCategory: {screen: MainCategory},
      SubCategory: {screen: SubCategory},
      DetailScene: {screen: DetailScene},
      Questions: {screen: Questions},
      Ruleta: {screen: Ruleta},
    }, {
      initialRouteName: "MainCategory",
      headerMode: "none"
    })

    const DrawerNavigator = createDrawerNavigator({
      MainCategory: {screen: MainCategory},
    }, {
      drawerPosition: 'right',
      contentComponent: CustomDrawerComponent
    })

    const MainNavigator = createSwitchNavigator({
      Stack: StackNavigator,
      Drawer: DrawerNavigator,
    }, {
      initialRouteName: 'Stack',
      contentComponent: CustomDrawerComponent
    })

    const AppContainer = createAppContainer(MainNavigator)
    return(
      <AppContainer />
    )
  }
}

// Specific scene
import React, { Component } from 'react'
import { ScrollView, StatusBar, View, TouchableOpacity, Text, Image, Modal } from 'react-native'

import HeaderBar from '../Components/HeaderBar'

export default class Questions extends Component {
    constructor(props) {
        super(props)
        this.state = {
            headerTitle: props.navigation.getParam('headerTitle'),
            catId: props.navigation.getParam('catId'),
        }
    }

    openSideMenu = () => {
        this.props.navigation.toggleDrawer
        this.props.navigation.openDrawer()
    }

    render() {
        return (
            <View style={rootStyle}>
                <View>
                    <StatusBar hidden={false} translucent backgroundColor="transparent" barStyle="light-content" />
                    <HeaderBar title={headerTitle} onPressLeft={() => this.props.navigation.goBack()} leftShow={true} onPressRight={this.openSideMenu} rightShow={true} />
                </View>
                <ScrollView>
                    <QuestionList todoQues={todoQues} favQues={favQues} action={this.action.bind(this)} />
                </ScrollView>
            </View>
        )
    }
}

但它不起作用。

我希望得到如下屏幕截圖所示的結果。 預期結果

請讓我知道我應該做些什么以及如何在特定場景中使用抽屜導航器。

謝謝你的時間！

Answer 1

首先，不是調用方法this.props.navigation.toggleDrawer() ，而是調用方法this.props.navigation.dispatch(DrawerActions.openDrawer()) 。 您還需要導入 DrawerActions 才能工作。 並刪除您在openSideMenu函數中調用的第一個函數，因為您不需要this.props.navigation.openDrawer()