React native React Native中的嵌套堆栈导航器和抽屉导航器

安装堆栈导航器和抽屉导航器有几个问题。首先也是最重要的一点，下图是我预期的流程，我按照React导航提供的流程来实现，但我没有运气实现我预期的，并且实现的输出看起来很奇怪（您可以在第二张图中找到）。我还在底部附上了我的代码片段

此外，输出看起来像是抽屉导航器标题与堆栈导航器重复

除此之外，我还不太熟悉本地人。我希望有人能让我更清楚地了解实现应该是什么样子，因为我遇到过一些文章和网站，他们的解决方案在我的案例中不起作用

p/S：当从屏幕C单击其中一个项目时，屏幕X打开

import React，{Component}来自'React'；
进口{
形象,，
按钮
安全区域视图，
样式表，
滚动视图，
看法
文本，
状态栏，
}从“反应本机”；
从“react navigation drawer”导入{createDrawerNavigator，DrawerActions，DrawerItems}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
从“../HomeScreen”导入主屏幕；
从“../ItemDetailScreen”导入ItemDetailScreen；
从“../ProfileScreen”导入ProfileScreen；
常量NavOptionHandler=（导航）=>{
标题：空
}
const CustomDrawerComponent=（道具）=>(
)
const MyDrawerNavigator=createDrawerNavigator(
{
主页：{
屏幕：主屏幕
},
简介：{
屏幕：ProfileScreen
}
},
{
初始路由名称：“主页”，
contentComponent:CustomDrawerComponent，
内容选项：{
activeTintColor:“橙色”
}
}
);
const MyStackNavigator=createStackNavigator(
{
荷马：{
屏幕：MyDrawerNavigator
},
项目详情：{
屏幕：ItemDetailScreen，
导航选项：导航选项处理程序
}
},
{
初始路由名称：“HomeA”
}
);
const AppContainer=createAppContainer（MyStackNavigator）；
导出默认类StackNavigator扩展组件{
render（）{
返回；
}
}

您的抽屉导航器由堆栈导航器封装，这就是为什么您有一个双标题。
您需要做的是将抽屉导航器作为主导航器，并将堆栈导航器作为配置文件屏幕，以便在抽屉导航器中单击“配置文件”时显示

这应该起作用：

const navoptionHandler=navigation=>{
无效的
}
const CustomDrawerComponent=props=>(
)
const MyStackNavigator=createStackNavigator(
{
Profile:ProfileScreen，
项目详情：{
屏幕：ItemDetailScreen，
导航选项：导航选项处理程序，
},
},
{
initialRouteName:“配置文件”，
},
)
const MyDrawerNavigator=createDrawerNavigator(
{
主页：主屏幕，
ProfileStack：{
屏幕：MyStackNavigator，
导航选项：（）=>({
标题：“个人资料”，
}),
}
},
{
initialRouteName:“主页”，
contentComponent:CustomDrawerComponent，
内容选项：{
activeTintColor:“橙色”，
},
},
)
const AppContainer=createAppContainer（MyDrainerNavigator）
导出默认类StackNavigator扩展组件{
render（）{
返回
}
}

---

顺便说一下，因为您说您才刚刚开始使用React Native，除非您有特定的理由使用React Navigation v4，您可能应该改用v5，因为v4迟早会过时。

我已经实现了您提供的解决方案，但当通过主屏幕导航ItemDetailScreen并从ItemDetailScreen按back按钮时，会出现问题，它会导航回ProfileScreen。（expect输出应弹出导航它的父级，在本例中，ItemDetail屏幕应导航回主屏幕）。*我已经实现了这个.props.navigation.navigate.goBack（）和这个.props.navigation.navigate.pop（），但是它没有像我预期的那样工作。@MiracleHades这是正常的行为。当您按下后退按钮时，您将返回到所处的堆栈中，这是示例中的概要文件堆栈。如果您真的想这样做（我认为您不应该这样做，因为这会让用户非常困惑），我认为使用

push

（或者

reset

或

replace

）而不是

导航

会有所帮助。我计划实施此解决方案的原因是，在大多数情况下，ProfileScreen和HomeScreen都会重用ItemDetailScreen。如果我能实现重用，它会提高应用程序本身的可维护性。你说的重用是什么意思？如果你想在不同的导航堆栈中有相同的屏幕，你可以这样做。然后你需要有两个导航堆栈：

MyStackNavigator

，一个新的导航堆栈，带有

主屏幕

和

itemtailscreen

，你将放在抽屉导航器中。

import React, { Component } from 'react';
import {
    Image,
    Button,
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
} from 'react-native';
import { createDrawerNavigator, DrawerActions, DrawerItems } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../HomeScreen';
import ItemDetailScreen from '../ItemDetailScreen'; 
import ProfileScreen from '../ProfileScreen';
const navOptionsHandler = (navigation) => {
    header: null
}
const CustomDrawerComponent = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center' }}>
            <Image source={{ uri: 'https://example.com/logo.png' }} style={{
                height: 120,
                width: 120,
                borderRadius: 60
            }} />
        </View>
        <ScrollView>
            <DrawerItems {...props} />
        </ScrollView>
    </SafeAreaView>
)


const MyDrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Profile: {
            screen: ProfileScreen
        }
    },
    {
        initialRouteName: "Home",
        contentComponent: CustomDrawerComponent,
        contentOptions: {
            activeTintColor: 'orange'
        }
    }
);
const MyStackNavigator = createStackNavigator(
    {
        HomeA: {
            screen: MyDrawerNavigator
        },
        ItemDetail: {
            screen: ItemDetailScreen,
            navigationOptions: navOptionsHandler
        }
    },
    {
        initialRouteName: "HomeA"
    }
);


const AppContainer = createAppContainer(MyStackNavigator);

export default class StackNavigator extends Component {
    render() {
        return <AppContainer />;
    }
}