React Native-Tab + Drawer Navigator问题

Question

我正在使用React Navigation v3实现React TabNavigation +侧边抽屉。我可以从抽屉中切换标签，但是当我在标签之间切换时不能突出显示“选定的抽屉”项目！我花了最后2天的时间，用Google搜索了很多。 这就是发生的情况（在图像中）。我当时在家里，但是当我切换到“出售”选项卡时，“抽屉导航”没有更改。我希望抽屉在单击该选项卡时突出显示“出售”。

图片在这里

没有成功！这是我的导航代码。

import { createStackNavigator, createDrawerNavigator, createBottomTabNavigator } from 'react-navigation';
import { createAppContainer } from '@react-navigation/native';
import React from 'react';
import IonicIcon from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import login from './src/screens/Login';
import signup from './src/screens/SignUp';
import home from './src/screens/Home';
import posts from './src/screens/Posts';
//custom sidebar
import Sidebar from './src/screens/Sidedrawer';

const loginStack = createStackNavigator({
  SignIn: {
    screen: login,
    navigationOptions: () => {
      return {
        title: 'Login'
      }
    }
  }
});

const sellTab = createStackNavigator({
  SignUp: {
    screen: signup,
    navigationOptions: () => {
      return {
        title: 'Sell',
      }
    }
  }
});

const homeTab = createStackNavigator({
  Home: {
    screen: home,
    navigationOptions: () => {
      return {
        title: 'Home',
      }
    }
  }
});


const tabNavigator = createBottomTabNavigator({
  Home: {
    screen: homeTab,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor }) => (
        <IonicIcon name="md-home" size={30} color={tintColor} />
      )
    }
  },
  Sell: {
    screen: sellTab,
    navigationOptions: {
      tabBarLabel: 'Sell',
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="dollar" size={30} color={tintColor} />
      )
    }
  }
}, {
    initialRouteName: 'Home',
    tabBarOptions: {
      showIcon: true
    },
  });

const stackNavigator = createStackNavigator(
  {
    Login: loginStack,
    Tabs: {
      screen: tabNavigator
    }
  }, {
    initialRouteName: 'Login',
    // we dont want to display the header on tabs (Back button navigation bar)
    headerMode: 'none'
  }
);

// to disable the left swipe on login we have to specify the drawerLockMode after route initialization
stackNavigator.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  console.log(navigation, 'Nav');
  if (navigation.state.index === 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
}

const sideDrawerNavigator = createDrawerNavigator(
  {
    Login: stackNavigator,
    // Home: homeTab,
    // Sell: sellTab,
    Posts: posts
  }, {
    contentOptions: {
      activeTintColor: '#1094F6',
      activeBackgroundColor: '#f8f8ff'
    },
    order: ['Login', 'Posts'],
    'drawerPosition': 'left', // you can change to right
    'contentComponent': (props) => <Sidebar {...props} /> // all contentOptions will be passed as props to Sidebar Component
  }
);

export default createAppContainer(sideDrawerNavigator);