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

Question

我在设置 Stack Navigator 和 Drawer Navigator 时遇到了一些问题。首先，下图是我预期的流程，我按照 React Navigation 提供的 documentation 来实现，但我没有运气实现我的预期，实现的输出看起来很奇怪（你可以在第二张图片上找到它）。我还在底部附上了我的代码片段。

此外，抽屉导航器 header 的输出看起来与堆栈导航器重复。

除此之外，我对 React Native 还很陌生。我希望有人能让我更清楚实现应该是什么样子，因为我看过一些文章和网站，他们的解决方案对我来说不起作用。

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

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 />;
    }
}

Answer 1

你的抽屉导航器被堆栈导航器封装，这就是你有双头的原因。
您需要做的是将抽屉导航器作为您的主导航器，并将您的堆栈导航器作为您的配置文件屏幕，这样当您在抽屉导航器中单击“配置文件”时它就会显示。

这应该有效：

const navOptionsHandler = navigation => {
  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 MyStackNavigator = createStackNavigator(
  {
    Profile: ProfileScreen,
    ItemDetail: {
      screen: ItemDetailScreen,
      navigationOptions: navOptionsHandler,
    },
  },
  {
    initialRouteName: 'Profile',
  },
)

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: HomeScreen,
    ProfileStack: {
      screen: MyStackNavigator,
      navigationOptions: () => ({
        title: 'Profile',
      }),
    }
  },
  {
    initialRouteName: 'Home',
    contentComponent: CustomDrawerComponent,
    contentOptions: {
      activeTintColor: 'orange',
    },
  },
)

const AppContainer = createAppContainer(MyDrawerNavigator)

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

顺便说一下，既然你说你才刚刚开始使用 React Native，除非你有特定的理由使用 React Navigation v4，否则你应该使用 v5，因为 v4 有一天或另一天会过时。

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

Nested Stack Navigator and Drawer Navigator in React Native

react-native

react-native-navigation