react-native - 在本机反应中坐在抽屉屏幕中的组件中时标题错位

Question

我正在尝试从反应导航器抽屉屏幕设置 headerLeft，但它在应用程序的正常标题下方显示标题。

我想从 Drawer.navigator 中的每个屏幕设置默认应用程序标题。

这是我的 App.js 代码

import React from 'react';
import { Button, Text, TouchableOpacity } from 'react-native'
import DashboardComponent  from "./src/components/Dashboard/dashboard";
import LoginScreen from "./src/screens/LoginScreen";
import SignUpScreen from "./src/screens/signUpScreen";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen1 from './src/screens/screen1';
import { createDrawerNavigator } from '@react-navigation/drawer';
import SideBarComponent from './src/components/sideBar/sidebar';
import { List, Colors } from 'react-native-paper';
const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Dashboard" component={DrawerRoutes} options={{
          headerShown: true,
          headerLeft: () => (
            <TouchableOpacity>
                  <List.Icon color={Colors.blue500} icon="menu" />
            </TouchableOpacity>
        ),
        }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Drawer = createDrawerNavigator();
const DrawerRoutes = () => {
  return (
    <Drawer.Navigator initialRouteName="Screen1"  drawerContentOptions={{
      activeTintColor: '#e91e63',
      itemStyle: {marginVertical: 5},
    }}
    
    drawerContent={() => {
      return(
        <SideBarComponent></SideBarComponent>
      )
    }}>
      <Drawer.Screen name="Dashboard"
                      component={DashboardComponent}
                      options={{
                        headerShown: true,
                        headerLeft: () => <Text>Hello</Text>
                      }}
                     ></Drawer.Screen>
    </Drawer.Navigator>
  )
}

export default App;

标签： react-native