Android 在抽屉内嵌套TabNavigator时未找到路由

我正在使用一个嵌套在抽屉内的TabNavigator。 我的TabNavigator包含2个屏幕，DroperNavigator有4条路由，其中一条是TabNavigator

当我滑动到TabNavigator中的第二个选项卡，然后使用抽屉转到其他路径并使用抽屉返回TabNavigator时，这是一个错误

以下是选项卡导航器：

const MyTabNavigator = TabNavigator(
{
    Tab1: {
        screen: StackNavigator1,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab1"
        })
    },
    Tab2: {
        screen: StackNavigator2,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab2",
            header: false
        })
    }
},
{
    tabBarPosition: 'top',
    tabBarOptions: {
        activeTintColor: '#000000',
        inactiveTintColor: '#707070',
        labelStyle: labelStyle,
        style: {
            backgroundColor: '#ffffff',
        },
        indicatorStyle: {
            borderBottomColor: '#ff3278',
            borderBottomWidth: 3
        }
    }
});

const MyDrawerNavigator = DrawerNavigator(
{
    Tabs: {
        screen: MyTabNavigator
    },
    Key1: {
        screen: Navigator1
    }
    .
    .
    .
},
{
    contentComponent: (props) => {
        return <View>
            <View style={styles.drawerHeaderStyle}>
                <Text style={styles.drawerHeaderTextStyle}>{`Welcome user`}</Text>
            </View>
            <DrawerItems {...props} />
            <View style={styles.emptySpace} />
            <Touchable
                onPress={() => {
                    // Logout User
                }}
                style={styles.logoutButton}
                background={Touchable.Ripple('grey')}>
                <Text style={styles.buttonFont}>{"Logout"}</Text>
            </Touchable>
        </View>
    }
});

这是抽屉的提示：

const MyTabNavigator = TabNavigator(
{
    Tab1: {
        screen: StackNavigator1,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab1"
        })
    },
    Tab2: {
        screen: StackNavigator2,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: "Tab2",
            header: false
        })
    }
},
{
    tabBarPosition: 'top',
    tabBarOptions: {
        activeTintColor: '#000000',
        inactiveTintColor: '#707070',
        labelStyle: labelStyle,
        style: {
            backgroundColor: '#ffffff',
        },
        indicatorStyle: {
            borderBottomColor: '#ff3278',
            borderBottomWidth: 3
        }
    }
});

const MyDrawerNavigator = DrawerNavigator(
{
    Tabs: {
        screen: MyTabNavigator
    },
    Key1: {
        screen: Navigator1
    }
    .
    .
    .
},
{
    contentComponent: (props) => {
        return <View>
            <View style={styles.drawerHeaderStyle}>
                <Text style={styles.drawerHeaderTextStyle}>{`Welcome user`}</Text>
            </View>
            <DrawerItems {...props} />
            <View style={styles.emptySpace} />
            <Touchable
                onPress={() => {
                    // Logout User
                }}
                style={styles.logoutButton}
                background={Touchable.Ripple('grey')}>
                <Text style={styles.buttonFont}>{"Logout"}</Text>
            </Touchable>
        </View>
    }
});

所以，当我滑动到键1，然后使用抽屉来导航1，最后使用抽屉返回选项卡时，我得到一个错误

错误：没有为键Screen1定义路由，必须是Screen3、Screen4中的一个

其中Screen3和Screen4位于StackNavigator 2中

---

我希望我能够恰当地描述这个问题。有什么想法吗？

我也面临着这些问题，但我想出了一个解决方案，建立自己的标题，称为抽屉导航器

class Header extends Component {
  render() {
    return (
      <View>
        <Logo />
        <TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Icon size={24} style={{ color: '#fff' }} name="navicon" />
        </TouchableOpacity>
      </View>
    )
  }
}

Header.propTypes = {
  navigation: PropTypes.instanceOf(Object).isRequired,
}

export default withNavigation(Header)

---

用导航功能包装屏幕可能会奏效。

好的。我已经想出了一个解决办法。这有点难以解释，但我还是会努力的

为了让它工作，我必须自己覆盖DrumerItems的onItemPress方法

我的抽屉现在看起来像这样：

const MyDrawerNavigator = DrawerNavigator(
{
    Tabs: {
        screen: MyTabNavigator
    },
    Key1: {
        screen: Navigator1
    }
    .
    .
    .
},
{
    contentComponent: (props) => {
        return <View>
            <View style={styles.drawerHeaderStyle}>
                <Text style={styles.drawerHeaderTextStyle}>{`Welcome user`}</Text>
            </View>
            <DrawerItems {...props} onItemPress={(routeOptions) => {
                props.navigation.navigate(routeOptions.route.routes[routeOptions.route.index].routeName, {})
            }} />
            <View style={styles.emptySpace} />
            <Touchable
                onPress={() => {
                    // Logout User
                }}
                style={styles.logoutButton}
                background={Touchable.Ripple('grey')}>
                <Text style={styles.buttonFont}>{"Logout"}</Text>
            </Touchable>
        </View>
    }
});

---

请注意在DrumerItems中添加的onItemPress。这看起来很像react导航本身的一个bug。

我没有完全理解您的意思。我现在没有在任何屏幕上使用自定义标题。您是否建议使用自定义标题来解决此问题？还是说我应该用导航来包装我的屏幕？这个问题似乎发生在导航器内部。在这种情况下，包装屏幕有什么帮助？