Маршрут не найден при вложении TabNavigator в DrawerNavigator

Question

Я использую TabNavigator, вложенный в DrawerNavigator.Мой 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>
    }
});

Каждый из StackNavigators имеет 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

Хорошо.Я нашел решение.Это немного сложно объяснить, но я все же попробую.

Чтобы заставить его работать, мне пришлось переписать метод onItemPress самого DrawerItems.

Мой 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>
    }
});

Обратите внимание на onItemPress, добавленное в DrawerItems.Это скорее похоже на ошибку в самореактивной навигации.

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(), возможно, подойдет.