在DrawerNavigator中嵌套TabNavigator时找不到路由-Java 学习之路

-1

我正在使用嵌套在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>
    }
});

每个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，最后使用抽屉回到“标签”，我得到一个错误说

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

Screen3和Screen4位于StackNavigator2中 .

我希望我能够恰当地描述这个问题 . 有任何想法吗？

2 回答

好的 . 我找到了解决方案 . 这有点难以解释，但我会尝试 .

为了让它工作，我不得不自己覆盖 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 . 这看起来像反应导航本身的一个错误 .

回复于 2024-05-19T13:03:48+08:00

我也遇到过这些问题，但我想出了一个解决方案， Build 了我自己的 Headers ，它将调用抽屉导航器 .

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() 包装你的屏幕可能会有所帮助 .

回复于 2024-05-19T13:03:48+08:00

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

2 回答

相关问题