使用react-navigation从标题图标切换抽屉

Question

我是反应原生和反应导航的新手。 必需屏幕：带有标题（缩略图+标题）的主页，两个选项卡和一个用于切换缩略图的按钮的抽屉。

请检查我的代码：

import React, { Component } from 'react';
import { Platform,  StyleSheet,  Text, View, TouchableOpacity} from 'react-native';
import {Icon, Button} from 'native-base';
const util = require('util');
import { TabNavigator, StackNavigator, DrawerNavigator, NavigationActions } from 'react-navigation';
import FirstScreen from './tabs/FirstScreen';
import SecondScreen from './tabs/SecondScreen';
import Profile from './Profile';
import SearchScreen from './tabs/SearchScreen';

const DrawerScreens = DrawerNavigator({
    Profile: {screen: Profile}
},{
    drawerPosition: 'left',
    drawerWidth: 150
});

// A drawer navigator

 const TabScreens= TabNavigator({
    First: {screen: FirstScreen},
    Second: {screen: SecondScreen}
  }); 

//   Started with a tab navigator to register two tabs

  const MenuButton =({navigation})=>{
   return(
        <View>        
        <TouchableOpacity onPress={()=>(navigation.navigate('DrawerToggle'))}>
            <Icon name="person" size= {20}/>
        </TouchableOpacity>
      </View>)};

export const StackScreens= StackNavigator({
    Draw: {screen: DrawerScreens},
    // Drawer navigator as a screen
    Display: {screen: TabScreens, 
        // Making the tabnavigator as a screen
        navigationOptions: ({navigation})=>({
        title: 'Welcome',
        headerLeft: <MenuButton navigation={navigation} />
      })
    },

},{
    initialRouteName: 'Display'
});

按下缩略图时，TabScreens导航到DrawerScreens（因为这是我编码的方式）。我想让它切换。有人可以帮助我。

Answer 1

以下是关于how to structure your navigator properly.

的一些一般性建议

您使用的是哪个react-navigation版本？

尝试将MenuButton辅助方法更改为此方法，看看是否有帮助

if (navigation.state.index === 0) {
    navigation.navigate('DrawerOpen')
  } else {
    navigation.navigate('DrawerClose')
  }