react-native - 抽屉中的子菜单 - React Native

Question

嗨，我是 React Native 的新手。我已经开发了所有的屏幕和导航。在抽屉中，我有一个名为Reports的菜单。如果我点击它，我想显示 2 个子菜单，旧报告和新报告。我已经为样式定制了抽屉菜单。

我的 React 本机版本是 0.62。我正在使用React Navigation ( https://reactnavigation.org/ ) 库进行导航。

下面是我的抽屉菜单截图的附件。请分享你的想法。

<View style={{flex:1}}>
        <DrawerContentScrollView {...props}>
            <View style={styles.drawerContent}>
                <View style={styles.userInfoSection}>
                    <View style={{flexDirection:'row'}}>
                        <Avatar.Image
                        source={require('../Assets/user.png')}
                        />
                        <View style={{marginHorizontal:10, justifyContent:'center', width:'70%'}}>
                            <Text style={{color:'gray'}}>k******@gmail.com</Text>
                        </View>                  
                    </View>
                </View>
                <View style={{alignItems:'center', marginVertical:15}}>
                    <View
                    style={{borderBottomColor:'gray',borderWidth:0.5, width:'90%'}}
                    />
                </View>
                <View>
                    <DrawerItem 
                        icon={({color, size}) => (
                            <Icon 
                                name="md-home"
                                size={size}
                                color={Colors.primary}
                            />

                        )}
                        label="Home"
                        onPress={() => props.navigation.navigate('Home')}
                    />

                    <DrawerItem 
                        icon={({color, size}) => (
                            <Icon 
                                name='ios-document'
                                size={size}
                                color={Colors.primary}
                            />
                        )}
                        label='Report'
                        onPress={() => props.navigation.navigate('Report')}
                        />

                    <DrawerItem 
                        icon={({color, size}) => (
                            <Icon 
                                name="ios-notifications"
                                size={size}
                                color={Colors.primary}
                            />

                        )}
                        label='Notifications'
                        onPress={() => props.navigation.navigate('Notification')}
                    />

                </View>
            </View>
        </DrawerContentScrollView>

        <Drawer.Section>
            <DrawerItem 
            icon={({color, size}) => (
                <Icon 
                name="ios-exit"
                color="red"
                size={size}
                />
            )}
            label="SignOut"
            onPress={ () => signOut()}
            />
        </Drawer.Section>
    </View>

标签： react-native