[英]React Native drawer navigation: how to open drawer by clicking custom button in specific scene?
I've tried to open the drawer by clicking the following button (screenshot) in a specific scene.我试图通过单击特定场景中的以下按钮(屏幕截图)来打开抽屉。 current status
当前状态
and here goes my code.这是我的代码。
// 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>
)
}
}
But it's not working.但它不起作用。
I expect the result like the following screenshot.我希望得到如下屏幕截图所示的结果。 expected result
预期结果
Please let me know what I should do more and how to use the drawer navigator in a specific scene.请让我知道我应该做些什么以及如何在特定场景中使用抽屉导航器。
Thanks for your time!谢谢你的时间!
First of all instead of calling the method this.props.navigation.toggleDrawer() , call the method this.props.navigation.dispatch(DrawerActions.openDrawer()) .首先,不是调用方法this.props.navigation.toggleDrawer() ,而是调用方法this.props.navigation.dispatch(DrawerActions.openDrawer()) 。 You also need to import DrawerActions for this to work.
您还需要导入 DrawerActions 才能工作。 And remove the first function that you called in your openSideMenu function because you don't need the this.props.navigation.openDrawer()
并删除您在openSideMenu函数中调用的第一个函数,因为您不需要this.props.navigation.openDrawer()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.