在 DrawerNavigator 中嵌套 TabNavigator 时找不到路由

Question

我正在使用嵌套在 DrawerNavigator 中的 TabNavigator。 我的 TabNavigator 包含 2 个屏幕，DrawerNavigator 有 4 个路由，其中​​之一是 TabNavigator。

当我在 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
        }
    }
});

这里是 DrawerNavigator：

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

每个 StackNavigator 都有 2 个屏幕。比如：

const StackNavigator1 = StackNavigator(
{
    Screen1: {
        screen: Screen1,
        navigationOptions: ({ navigation }) => ({
            header: false
        })
    },
    Screen2: {
        screen: Screen2,
        navigationOptions: ({ navigation }) => ({
            header: false,
            tabBarVisible: false,
            swipeEnabled: false,
            drawerLockMode: 'locked-closed'
        }),
    }
}, {
    headerMode: "screen"
});

所以当我滑动到“Key1”然后使用抽屉进入 Navigator1 并最终使用抽屉返回“Tabs”时，我收到一个错误提示

Error: There is no route defined for key Screen1, Must be one of Screen3, Screen4.

Screen3 和 Screen4 位于 StackNavigator2 中。

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

Answer 1

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

为了让它工作，我必须自己重写 DrawerItems 的 onItemPress 方法。

我的 DrawerNavigation 现在看起来像这样：

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

注意DrawerItems 中添加的onItemPress。这看起来更像是 react-navigation 本身的一个错误。

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

用withNavigation() 包裹你的屏幕也许会奏效。