反应导航打开 openDrawer() 不起作用

Question

这是我的导航代码，我有一个抽屉导航器，其中包含堆栈，我遇到的问题是我无法在堆栈中使用

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

功能。

我编写导航的方式是否错误，任何帮助将不胜感激。

提前致谢。

Answer 1

这里您可以参考抽屉式导航栏的代码。

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

祝你有美好的一天。

Answer 2

仅定义了抽屉的屏幕，但没有与要显示的视图关联的定义。你可以配置自己的Drawer，可以设置draw value。

示例

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);