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

每个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的{{1}}方法。

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

DrawerItems

请注意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。这看起来像是反应导航本身的一个错误。

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

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

2 个答案: