Ящик Навигатор Детский Реквизит

Question

Могу ли я получить реквизиты от дочернего элемента моего DrawerNavigator внутри моего CustomDrawerComponent?

Когда я открываю свой ящик, я хотел, чтобы в нем находились мои экраны 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>
    )
})

Результат: