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()

React Native抽屉导航：如何在特定场景点击自定义按钮打开抽屉？

React Native drawer navigation: how to open drawer by clicking custom button in specific scene?

javascript

react-native

react-navigation

react-navigation-drawer

react-navigation-stack