如何在单个菜单项的抽屉菜单中添加图标？

Question

我正在使用抽屉菜单，我需要为每个菜单项添加图标。如何添加图标以便在eah活动名称之前显示？

我的代码 -

class SideMenu extends Component {

    renderMenu() {
        let menuArray = [
            {
                id:1,
                screen: 'HomeDrawer',
                title: 'Dashboard',
            },
            {
                id:2,
                screen: 'AccountSettings',
                title: 'Account Settings',
            },
            {
                id:3,
                screen: 'NotificationSettings',
                title: 'Notification Settings',
            }
        ]

        return menuArray.map((item) => {
            return(
                <TouchableWithoutFeedback 
                    onPress={this.navigateToScreen(item.screen)} key={item.id}>
                    <View style={styles.menuItemContainer}>
                        <View  style={{ flex:2 }}>
                            <Text style={styles.menuText}>{item.title}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            )
        })
    }

    render() {
        return(
            <View style={{ flex:1, backgroundColor:'#FFFFFF' }}>
                <ScrollView>
                    <View style={{ height: '30%', marginBottom: 50}}>         
                    <LinearGradient 
                        start={{ x: 0, y:0 }}
                        end={{ x: 1, y: 0 }}
                        colors={['#1865e5', '#159af6']}
                        style={{height: 200}} >         


                    <View style={{ elevation: 5,}}>
                        <Image
                            source={require('../assets/logo.png')}
                            style={{ height:100, width:100, marginLeft: 10, marginTop: 30, marginBottom: 10 }}
                        />
                    </View>

                    <View>
                    {
                            this.state.userDetails ?

                            <View>

                                    <Text style={{ fontWeight: "bold", fontSize:15, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].name}</Text>
                                    <Text style={{ fontSize:14, color: '#FFFFFF', marginLeft: 10 }}>{this.state.userDetails && this.state.userDetails.Details[0].email}</Text>
                            </View>

                            :
                            <Text>Loading...</Text>
                    }

                    </View>                    
                    </LinearGradient>  
                    </View>                  
                    { this.renderMenu() }

                    <TouchableWithoutFeedback 
                        onPress={ () => {
                            Alert.alert(
                                'Logout',
                                'Are you sure you want to logout?',
                                [
                                  {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                  {text: 'Yes', onPress: () => {

                                    AsyncStorage.removeItem('userDetails', () => 
                                    {

                                    });
                                    this.navigateToScreen('Login')();
                                  }},
                                ],
                                { cancelable: false }
                              )
                        }}>
                        <View style={styles.menuItemContainer}>
                            <View  style={{ flex:3 }}>
                                <Text style={styles.menuText}>Logout</Text>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>

                </ScrollView>
            </View>
        )
    }
}

})

export default SideMenu

实现 -

尝试向每个ID和图片添加icon属性，但不幸的是它没有按预期工作。

如何添加资源文件夹中的图标，以便按照与此问题一起附加的设计进行显示？

Answer 1

您必须制作自定义侧栏，以便为添加图标添加更多灵活性。