React Native抽屉导航：如何通过单击特定场景中的自定义按钮来打开抽屉？

Question

我已经尝试通过在特定场景中单击以下按钮（截屏）来打开抽屉。current status

这是我的代码。

// 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>
        )
    }
}

但是它不起作用。

我希望得到类似以下屏幕截图的结果。expected result

请让我知道我应该做些什么以及如何在特定场景中使用抽屉式导航器。

感谢您的时间！

Answer 1

首先，不调用方法this.props.navigation.toggleDrawer（），而是调用方法this.props.navigation.dispatch（DrawerActions.openDrawer（））。您还需要导入DrawerActions使其起作用。并删除您在openSideMenu函数中调用的第一个函数，因为您不需要this.props.navigation.openDrawer（）