嵌套的选项卡导航器在抽屉导航器中不起作用

Question

我正在尝试将选项卡导航器嵌入到抽屉导航器中，但抽屉导航器有时会停止工作。代码：https://github.com/myplaceonline/testreactexpo/tree/drawernestedtabs

重现问题：

单击底部的“屏幕 2”选项卡
打开抽屉
点击主页
打开抽屉
单击屏幕 2
什么都没发生

有没有更好的方法来做到这一点并保持抽屉和底部标签同步并避免抽屉停止工作的问题？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  NavigationActions,
  DrawerActions,
} from 'react-navigation';
import { Ionicons } from '@expo/vector-icons';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ffffff",
    alignItems: "center",
    justifyContent: "center",
  },
});

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: "Home",
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}

class Screen2Screen extends React.Component {
  static navigationOptions = {
    title: "Screen2",
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen2</Text>
      </View>
    );
  }
}

const AppScreensTabs = {
  Home: HomeScreen,
  Screen2: Screen2Screen,
};

const AppScreensTabOptions = {
  tabBarOptions: {
    showLabel: true,
  },
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;

      // https://expo.github.io/vector-icons/
      if (routeName === "Home") {
        iconName = "md-home";
      } else if (routeName === "Screen2") {
        iconName = "md-beer";
      }

      return <Ionicons name={iconName} size={25} color={tintColor} />;
    },
  }),
};

const AppScreens = {
  TabHome: createBottomTabNavigator(
    AppScreensTabs,
    Object.assign(
      { initialRouteName: "Home" },
      AppScreensTabOptions,
    )
  ),
  TabScreen2: createBottomTabNavigator(
    AppScreensTabs,
    Object.assign(
      { initialRouteName: "Screen2" },
      AppScreensTabOptions,
    )
  ),
};

const AppScreensStackNavigationOptions = {
  defaultNavigationOptions: ({ navigation }) => ({
    headerLeft: <Ionicons name="md-menu" size={25} onPress={ () => navigation.openDrawer() } style={{ marginLeft: 15 }} />
  })
};

const AppDrawer = createAppContainer(createDrawerNavigator({
  DrawerHome: {
    screen: createStackNavigator(
      AppScreens,
      Object.assign(
        { initialRouteName: "TabHome" },
        AppScreensStackNavigationOptions,
      )
    ),
    navigationOptions: {
      drawerLabel: "Home",
    }
  },
  DrawerScreen2: {
    screen: createStackNavigator(
      AppScreens,
      Object.assign(
        { initialRouteName: "TabScreen2" },
        AppScreensStackNavigationOptions,
      )
    ),
    navigationOptions: {
      drawerLabel: "Screen2",
    }
  },
}));

export default class App extends React.Component {
  render() {
    return (
      <AppDrawer />
    );
  }
}

<div data-snack-id="@git/github.com/myplaceonline/testreactexpo@drawernestedtabs" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

Answer 1

您似乎在尝试使抽屉状态和选项卡状态保持同步，但我想从用户体验的角度来看，将它们视为单独的导航容器可能更有意义，每个导航容器都有自己的导航层次结构。使它们保持同步不是 straight-forward 使用 react-navigation，也不是我认为人们在浏览您的应用程序时会熟悉的模式。

嵌套的选项卡导航器在抽屉导航器中不起作用

Nested tab navigators don't work inside drawer navigator

reactjs

react-native

react-navigation

expo

react-navigation-drawer