react-native - 反应导航打开openDrawer()不起作用
问题描述
这是我的导航代码,我有一个抽屉导航器,其中包含堆栈,我遇到的问题是我无法this.props.navigation.openDrawer()
在堆栈内使用,导航器打开抽屉但我仍然可以通过滑动打开抽屉屏幕。我的代码,
const MyDrawerNavigator = createDrawerNavigator(
{
Home: AppStack,
MyAccount: MyAccountStack,
PointsProfile: PointsProfStack,
WishList: WishListStack,
BonusPoint: BonusPoint,
ContactUs: ContactUs,
InviteFriend: InviteFriend,
Terms: Terms,
SignOut: SignOut
}
}
const AppStack = createStackNavigator(
{
Home: Home,
Notification: Notification,
Suggested: Suggested,
HomeSearch: HomeSearchV2,
SearchHist: DishSearchHistory,
//tab screens
MealScreen: MealScreenTab,
SearchScreen: SearchScreenTab,
CuisineScreen: CuisineScreenTab
})
当我在控制台中登录时this.props.navigation
,AppStack
我发现openDrawer()
没有提供该功能。但是当我控制台登录时this.props.navigation
,ContactUs
它只是一个屏幕,它显示了openDrawer()
功能。
我写导航的方式是否错误,任何帮助将不胜感激。
提前致谢。
解决方案
在这里您可以参考导航抽屉的代码。
import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
class NavigationDrawerStructure extends Component {
//Structure for the navigatin Drawer
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
//All the screen from the Screen1 will be indexed here
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen2_StackNavigator = createStackNavigator({
//All the screen from the Screen2 will be indexed here
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen3_StackNavigator = createStackNavigator({
//All the screen from the Screen3 will be indexed here
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Options and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
//Title
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
});
export default createAppContainer(DrawerNavigatorExample);
祝你有美好的一天。