在 React Native 上使用 DrawerNavigator 和堆栈导航

如何解决在 React Native 上使用 DrawerNavigator 和堆栈导航

我目前在我的应用程序上使用堆栈导航，但我想向其中添加一个抽屉菜单。 当我尝试添加时，我的应用程序上的当前导航容器出现冲突问题。

我应该把抽屉放在哪里？在我的 App.tsx 上，在我的 routes.ts 中？或者像组件一样使用它？

这是我的 app.tsx：

@Composable
fun annotatedStringResource(@StringRes id: Int,vararg formatArgs: Any): AnnotatedString {
    val resources = LocalContext.current.resources
    return remember(id) {
        val text = resources.getText(id,*formatArgs)
        spannableStringToAnnotatedString(text)
    }
}

@Composable
fun annotatedStringResource(@StringRes id: Int): AnnotatedString {
    val resources = LocalContext.current.resources
    return remember(id) {
        val text = resources.getText(id)
        spannableStringToAnnotatedString(text)
    }
}

private fun spannableStringToAnnotatedString(text: CharSequence): AnnotatedString {
    return if (text is Spanned) {
        val spanStyles = mutablelistof<AnnotatedString.Range<SpanStyle>>()
        spanStyles.addAll(text.getSpans(0,text.length,Underlinespan::class.java).map {
            AnnotatedString.Range(
                SpanStyle(textdecoration = Textdecoration.Underline),text.getSpanStart(it),text.getSpanEnd(it)
            )
        })
        spanStyles.addAll(text.getSpans(0,StyleSpan::class.java).map {
            AnnotatedString.Range(
                SpanStyle(fontWeight = FontWeight.Bold),text.getSpanEnd(it)
            )
        })
        AnnotatedString(text.toString(),spanStyles = spanStyles)
    } else {
        AnnotatedString(text.toString())
    }
}

我是这样插入抽屉的：

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,Comfortaa_400Regular,Comfortaa_500Medium,Comfortaa_600SemiBold,Comfortaa_700Bold,});

    if (!fontsLoaded) {
        return null;
    }
    return (
        <Routes/>
    );
}

这是我的路由文件：

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,});

    if (!fontsLoaded) {
        return null;
    }
    const Drawer = createDrawerNavigator();
    function CustomDrawerContent(props) {
        return (
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem
                    label="Close drawer"
                    onPress={() => props.navigation.closeDrawer()}
                />
                <DrawerItem
                    label="Toggle drawer"
                    onPress={() => props.navigation.toggleDrawer()}
                />
            </DrawerContentScrollView>
        );
    }
    function MyDrawer() {
        const Drawer = createDrawerNavigator();

        return (
            <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
                <Drawer.Screen name="Home" component={Welcome}/>
                <Drawer.Screen name="Map" component={IncidentsMap}/>
                <Drawer.Screen name="CreateIncident" component={SelectIncidentLocation}/>
            </Drawer.Navigator>
        );
    }

    return (
        /*<Routes/>*/

        <NavigationContainer>
            <MyDrawer/>
        </NavigationContainer>
    );
}

我设法在我的 App.tsx 中插入了抽屉，但是当我尝试在按钮中使用导航时遇到了一些冲突，我收到 export default function Routes() { return( <NavigationContainer> <Navigator screenoptions={{headerShown: false}}> {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/} <Screen name="WelcomePage" component={WelcomePage}/> <Screen name="WelcomePageStep2" component={WelcomePageStep2}/> <Screen name="IncidentsMap" component={IncidentsMap}/> <Screen name="IncidentDetails" component={IncidentDetails} options={{ headerShown: true,header: () => <Header showCancel={false} title="Incidente"/> }} /> <Screen name="SelectIncidentLocation" component={SelectIncidentLocation} options={{ headerShown: true,header: () => <Header title="Selecione no Mapa" showCancel={false}/> }} /> <Screen name="IncidentData" component={IncidentData}/> </Navigator> </NavigationContainer> ) } 。 有什么办法可以在插入抽屉菜单的同时仍然可以使用我当前的导航系统？

解决方法

您可以在抽屉导航器旁边添加堆栈导航器

Route.js

export default function Routes() {
return(
        <NavigationContainer>
           <Navigator screenOptions={{headerShown: false}}>
             <Screen name={'MyDrawer'} component={MyDrawer}/>
             //rest of your routes
           </Navgator>
        </NavigationContainer>
}

导航到您的抽屉

navigation.navigate('MyDrawer')