React Native，自定义 DrawerContent 导航器问题

大佬教程收集整理的这篇文章主要介绍了React Native，自定义 DrawerContent 导航器问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React Native，自定义 DrawerContent 导航器问题？@H_618_1@ 开发过程中遇到React Native，自定义 DrawerContent 导航器问题的问题如何解决？下面主要结合日常开发的经验，给出你关于React Native，自定义 DrawerContent 导航器问题的解决方法建议，希望对你解决React Native，自定义 DrawerContent 导航器问题有所启发或帮助；

我有一个自定义 DrawerContent 组件，但我无法使用 navigator.navigate('DrawerHelp') 从它导航到屏幕。

我仍然收到这个错误，我真的不知道如何解决它。

我正在尝试从“帮助”按钮导航到它自己的名为 DrawerHelp 的组件。

问题 任何导航器都未处理带有有效载荷 {"name":"DrawerHelp"} 的操作“NAVIGATE”

这是我下面的代码。

function DrawerComponent() {
    return (
        <Drawer.Navigator 
            drawerContentoptions={{activeBACkgroundcolor: '#efefef',activeTintcolor: '#000000'}}
            initialRoutename="Tabs" 
            drawerStyle={{ BACkgroundcolor:'#ffffff',wIDth:'85%',paddingBottom: 50 }} 
            drawerContent={ 
                props => ( <CustomDrawerContent {...props} /> )
            }>
            <Drawer.Screen name="Dashboard" component={Tabs} options={{
                drawerIcon: config => <Ionicons name={'ios-home'} size={18} color={'#444'} headertitle="AAA" />,}} />

            <Drawer.Screen name="Help" component={DrawerHelp} 
                options={{
                    drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>,}}
            />
        </Drawer.Navigator>
    );
}

export function CustomDrawerContent (props) {

    const [ tabs,setTabs ] = useState([
        { 
            name: 'Help',icon: 'ios-call',bordercolor: '#e7c53f',BACkgroundcolor: '#fff',color: '#e7c53f',FontWeight: '500'
        },{ 
            name: 'Share',icon: 'ios-megaphone',{ 
            name: 'logout',icon: 'ios-log-out',FontWeight: '500'
        }
    ]);

    return (
        <DrawerContentScrollVIEw {...props}>
            <DrawerItemList {...props} />
            <VIEw style={{ padding: 15 }}>
                <VIEw style={{ 
                    flexDirection: 'row',justifyContent: 'space-between',height: 50,alignItems: 'center'
                }}>
                    {
                        tabs.map((tab) => {
                            return (
                                <touchab@R_489_11396@pacity
                                    key={tab.namE}
                                    style={{
                                        height: '100%',flex: .32,alignItems: 'center',borderWIDth: .5,bordercolor: tab.bordercolor,BACkgroundcolor: tab.BACkgroundcolor,borderRadius: 10,flexDirection: 'row',justifyContent: 'space-evenly'
                                    }}
                                    onPress={() => {
                                        if(tab.name == 'logout') {
                                            // navigation.toggleDrawer();
                                        }

                                        if(tab.name == 'Share') {
                                            // onShare();
                                        }

                                        if(tab.name == 'Help') {
                                            props.navigation.navigate('DrawerHelp');
                                        }
                                    }}>
                                    <Ionicons name={tab.icon} size={18} style={{ color: tab.color }} />
                                    <Text style={{ color: tab.color,FontWeight: tab.FontWeight }}>{trans(tab.name,cntx.lang)}</Text>
                                </touchab@R_489_11396@pacity>
                            )
                        })
                    }
                </VIEw>
            </VIEw>
        </DrawerContentScrollVIEw>
    );
}

解决方法@H_618_1@

它不起作用，因为您定义了名为“Help”的 DrawerComponent

<Drawer.Screen name="Help" component={DrawerHelp} 
  options={{drawerIcon: config => <Ionicons name={'ios-people-circle-outline'} size={18} color={'#444'}/>
                

if(tab.name == 'Help') {
 props.navigation.navigate('DrawerHelp'); <== Change here to Help not DrawerHelp
}

大佬总结

以上是大佬教程为你收集整理的React Native，自定义 DrawerContent 导航器问题全部内容，希望文章能够帮你解决React Native，自定义 DrawerContent 导航器问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。