React native React Native-其中一个屏幕上没有标题（堆栈和抽屉导航）

我的导航文件如下。在堆栈导航器中注册的所有屏幕都有一个标题。在抽屉导航器中注册为第二个选项的一个屏幕根本没有标题（OrdersScreen）。我也尝试在堆栈导航器下添加它的条目，但它没有改变任何东西。OrderScreen中的setOptions不起作用，因为不显示标题

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

import { Platform } from 'react-native';

import Colors from '../constants/Colors';

import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
import CartScreen from "../screens/shop/CartScreen";
import OrdersScreen from "../screens/shop/OrdersScreen";


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();


const AppNavigation = () => {
  return(
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="ShopNavigation">
        <Drawer.Screen name="Products" component={ShopNavigation}/>
        <Drawer.Screen name="Orders" component={OrdersScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

const ShopNavigation = () => {
  return(
      <Stack.Navigator>
        <Stack.Screen
          name="Products"
          component={ProductsOverviewScreen}
          options={{
            title: 'All Products',
            headerStyle: {
              backgroundColor: Platform.OS === 'android' ? Colors.primary : ''
            },
            headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
            headerTitleStyle: {
              fontFamily: 'open-sans-bold'
            },
            headerBackTitleStyle: {
              fontFamily: 'open-sans'
            }
          }}
        />
        <Stack.Screen name="Product Details" component={ProductDetailScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
      </Stack.Navigator>
  );
};

export default AppNavigation;

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“react native”导入{Platform}；
从“../constants/Colors”导入颜色；
从“./screens/shop/ProductsOverviewScreen”导入ProductsOverviewScreen；
从“./screens/shop/ProductDetailScreen”导入ProductDetailScreen；
从“./screens/shop/CartScreen”导入CartScreen；
从“./screens/shop/OrdersScreen”导入订单屏幕；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
常量AppNavigation=（）=>{
返回(
);
};
const ShopNavigation=（）=>{
返回(
);
};
导出默认AppNavigation；

订单屏幕如下所示：

import React, {useEffect} from 'react';
import {FlatList, View, Platform, Text, Button} from 'react-native';
import { useSelector } from 'react-redux';
import {HeaderButtons, Item} from "react-navigation-header-buttons";
import CustomHeaderButton from "../../components/UI/HeaderButton";

const OrdersScreen = (props) => {
  const orders = useSelector(state => state.orders.orders);

  useEffect(() => {
    props.navigation.setOptions({
      title: 'Your Orders',
      headerLeft: () => (
        <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
          <Item
            title="Orders"
            iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
            onPress={() => props.navigation.toggleDrawer()}
          />
        </HeaderButtons>
        ),
    });
  },[])


  return(
    <View>
      <Text>Orders screens</Text>
      <Text>some text</Text>
      <Text>Yet another</Text>
      <Button title="toggle Drawer" onPress={() => props.navigation.toggleDrawer()} />
    </View>
  );
};


export default OrdersScreen; 

import React，{useffect}来自“React”；
从“react native”导入{平面列表、视图、平台、文本、按钮}；
从'react redux'导入{useSelector}；
从“反应导航标题按钮”导入{HeaderButtons，Item}；
从“../../components/UI/HeaderButton”导入CustomHeaderButton；
常量命令屏幕=（道具）=>{
const orders=useSelector（state=>state.orders.orders）；
useffect（（）=>{
props.navigation.setOptions({
标题：“您的订单”，
标题左侧：（）=>(
props.navigation.toggleDrawer（）}
/>
),
});
},[])
返回(
订单屏幕
一些文本
又一
props.navigation.toggleDrawer（）}/>
);
};
导出默认订单屏幕；

ProductsOverviewScreen是堆栈导航上的默认屏幕，可与标题按钮和标题图标配合使用

import React, { useEffect } from 'react';
import { FlatList, Platform } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import ProductItem from "../../components/ProductItem";
import { addToCart } from "../../redux/cartSlice";
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import CustomHeaderButton from "../../components/UI/HeaderButton";

const ProductsOverviewScreen = ({ navigation }) => {
  const products = useSelector(state => state.products.availableProducts);
  const dispatch = useDispatch();

  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
          <Item
            title="Orders"
            iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
            onPress={() => navigation.toggleDrawer()}
          />
        </HeaderButtons>
      ),
      headerRight: () => (
        <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
          <Item
            title="Cart"
            iconName={Platform.OS === 'android' ? 'md-cart' : 'ios-cart'}
            onPress={() => navigation.navigate('Cart')}
          />
        </HeaderButtons>
      )
      });
    }, [])


  return(
    <FlatList
      data={products}
      renderItem={({item}) =>
        <ProductItem
          image={item.imageUrl}
          title={item.title}
          price={item.price}
          onViewDetail={() => { navigation.navigate('Product Details', { productId: item.id, productTitle: item.title  })}}
          onAddToCart={() => dispatch(addToCart(item))}
        />
      }
      />
  );
};



export default ProductsOverviewScreen;

import React，{useffect}来自“React”；
从“react native”导入{FlatList，Platform}；
从“react-redux”导入{useSelector，useDispatch}；
从“../../components/ProductItem”导入ProductItem；
从“../../redux/cartSlice”导入{addToCart}”；
从“反应导航标题按钮”导入{HeaderButtons，Item}；
从“../../components/UI/HeaderButton”导入CustomHeaderButton；
const ProductsOverviewScreen=（{navigation}）=>{
const products=useSelector（state=>state.products.availableProducts）；
const dispatch=usedpatch（）；
useffect（（）=>{
navigation.setOptions({
标题左侧：（）=>(
navigation.toggleDrawer（）}
/>
),
头灯：（）=>(
导航。导航（'Cart'）}
/>
)
});
}, [])
返回(
{navigation.navigate（'Product Details'，{productId:item.id，productTitle:item.title}}}
onAddToCart={（）=>分派（addToCart（项））}
/>
}
/>
);
};
导出默认ProductsOverviewScreen；

编辑：谢谢。我已经按照你说的做了（抽屉导航器中只有一个项目，并将OrdersScreen移动到StackNavigator。我还向抽屉添加了自定义内容。现在唯一不起作用的是当我从OrdersScreen（通过抽屉自定义内容访问）打开抽屉时，我单击“Products”（默认且仅为抽屉项），不会发生任何事情（抽屉隐藏但仍保留在OrdersScreen上）

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem, } from '@react-navigation/drawer';

import { Platform } from 'react-native';

import Colors from '../constants/Colors';

import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
import CartScreen from "../screens/shop/CartScreen";
import OrdersScreen from "../screens/shop/OrdersScreen";


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();


const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Orders" onPress={() => props.navigation.navigate('Orders')} />
    </DrawerContentScrollView>
  );
}



const AppNavigation = () => {
  return(
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="ShopNavigation" drawerContent={props => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="Products" component={ShopNavigation}/>
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

const ShopNavigation = () => {
  return(
      <Stack.Navigator>
        <Stack.Screen
          name="Products"
          component={ProductsOverviewScreen}
          options={{
            title: 'All Products',
            headerStyle: {
              backgroundColor: Platform.OS === 'android' ? Colors.primary : ''
            },
            headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
            headerTitleStyle: {
              fontFamily: 'open-sans-bold'
            },
            headerBackTitleStyle: {
              fontFamily: 'open-sans'
            }
          }}
        />
        <Stack.Screen name="Product Details" component={ProductDetailScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
        <Stack.Screen name="Orders" component={OrdersScreen} />
      </Stack.Navigator>
  );
};

export default AppNavigation;

导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从'@react navigation/drawer'导入{createDrawerNavigator，DrawerContentScrollView，DrawerItemList，DrawerItem，}；
从“react native”导入{Platform}；
从“../constants/Colors”导入颜色；
从“./screens/shop/ProductsOverviewScreen”导入ProductsOverviewScreen；
从“./screens/shop/ProductDetailScreen”导入ProductDetailScreen；
从“./screens/shop/CartScreen”导入CartScreen；
从“./screens/shop/OrdersScreen”导入订单屏幕；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
const CustomDrawerContent=（道具）=>{
返回(
props.navigation.navigate（'Orders'）}/>
);
}
常量AppNavigation=（）=>{
返回(
}>
);
};
const ShopNavigation=（）=>{
返回(
);
};
导出默认AppNavigation；

EDIT2: 因此，现在我在CustomDrawer中有两个DrawItem，它们在“所有产品”和“订单”中都可以正常工作。我遇到的问题是，我无法摆脱默认的DrawerNavigation条目（不是自定义内容）：

这意味着Drawer.Navigator没有任何子项。默认情况下，它必须默认为StackNavigator，不是吗？您建议我将所有条目都来自CustomDrawerContent。目前，Drawer有以下项目：

• ShopNavigation（默认情况下，从“订单”单击时不起作用。）
• 所有产品（定制内容，随处可见）
• 订单（定制内容，随处可见）

const CustomDrawerContent=（props）=>{
返回(
props.navigation.navigate（'All Products'）}/>
props.navigation.navigate（'Orders'）}/>
);
}
常量AppNavigation=（）=>{
返回(
}>
<Drawer.Screen name="ShopNavigation" component={ShopNavigation}/>