抽屉导航器儿童道具

Question

有没有办法让我从我的CustomDrawerComponent中的DrawerNavigator的孩子那里获取道具？

当我打开抽屉时，我希望将StackNavigator屏幕放入其中，而不仅仅是“AppStackNavigator”。这样做有简单的方法吗？

我的导航员：

const AppStackNavigator = createStackNavigator(
    {
        Início: {
            screen: HomeScreen
        },
        Perfil: {
            screen: ProfileScreen
        },
        Notificações: {
            screen: NotificationScreen
        },
        'Criar Evento': {
            screen: CreateEventScreen
        },
        EventScreen
    },
    StackNavigatorConfig()
)

const AppNavigator = createDrawerNavigator(
    {
        AppStackNavigator
    },
    {
        contentComponent: Drawer,
        drawerBackgroundColor: color.primary.main
    }
)

const AppContainer = createAppContainer(AppNavigator)

我的CustomDrawerContentComponent：

export default (CustomDrawerContentComponent = props => {
    return (
        <ScrollView>
            <TouchableOpacity onPress={() => props.navigation.closeDrawer()} style={styles.close}>
                <EvilIcons style={{ color: color.primary.contrastLightText }} size={40} name="close" />
            </TouchableOpacity>
            <View style={styles.thumbImageContainer}>
                <ThumbImage image={require('../assets/images/user.jpg')} />
                <View style={styles.statusContainer}>
                    <TextApp>Luis Coimbra</TextApp>
                    <TextApp secondary>Apaixonado por Jesus</TextApp>
                </View>
            </View>

            <SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} {...itemsStyle} />
            </SafeAreaView>
        </ScrollView>
    )
})

Answer 1

使用props.navigation.state.routes [0] .routes.slice（-1）[0] .routeName，我可以设法获取活动路由器，以便我能够设置样式。如果你有更好的方法，我会很高兴看到。

不完全是我所期待的，但它现在运作良好：

export default (CustomDrawerContentComponent = props => {
    const activeRouterName = props.navigation.state.routes[0].routes.slice(-1)[0].routeName
    return (
        <ScrollView>
            <TouchableOpacity onPress={() => props.navigation.closeDrawer()} style={styles.close}>
                <EvilIcons style={{ color: color.dark.contrast }} size={40} name="close" />
            </TouchableOpacity>
            <View style={styles.thumbImageContainer}>
                <ThumbImage source={require('../assets/images/user.jpg')} />
                <View style={styles.statusContainer}>
                    <TextApp dark>Luis Coimbra</TextApp>
                    <TextApp secondary>Apaixonado por Jesus</TextApp>
                </View>
            </View>
            <SafeAreaView
                style={{ flex: 1, borderTopWidth: 2, borderTopColor: color.dark.contrast }}
                forceInset={{ top: 'always', horizontal: 'never' }}
            >
                {['Início', 'Perfil', 'Notificações', 'Criar Evento'].map(routerName => (
                    <View key={routerName} style={routerName == activeRouterName && styles.activeView}>
                        <TextApp
                            onPress={() => props.navigation.navigate(routerName)}
                            style={{
                                color:
                                    routerName == activeRouterName
                                        ? color.secondary()
                                        : color.dark.contrast,
                                margin: 16,
                                fontWeight: 'bold'
                            }}
                        >
                            {routerName}
                        </TextApp>
                    </View>
                ))}
            </SafeAreaView>
        </ScrollView>
    )
})

结果：