React native header 左键左边距

Question

我正在尝试将 padding 或 margin 添加到登录页面上的 header left icon 后退按钮。下面是我的代码，我尝试添加 headerLeftContainerStyle 但它不起作用。在主页上，菜单图标完美地从左侧填充了一个填充，但在登录页面上，后退按钮附加在屏幕的左侧。

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Colors from './src/settings/Colors';
import {StyleSheet, StatusBar, Text} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

import { DrawerContent } from './src/navigation/DrawerContent';
import { TabContent } from './src/navigation/TabContent';

import Login from './src/screens/auth/Login';
import Feedback from './src/screens/Feedback';


const Drawer = createDrawerNavigator();

const App = () => {
return (
    <NavigationContainer>
        <StatusBar barStyle="dark-content" backgroundColor={Colors.primary} />
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />} screenOptions={{
            headerShown: true,
            headerTitleAlign: 'center',
            headerStyle: styles.headerBackgroundColor,
            headerTitleStyle: styles.headerTitleStyle,
        }}>
            {/* <Drawer.Screen name="home" component={TabContent} options={{ title: 'DevMuscles' }} /> */}
            <Drawer.Screen name="Home" component={TabContent} />
            <Drawer.Screen name="Feedback" component={Feedback} options={{ title: 'Feedback' }} />
            <Drawer.Screen name="Login" component={Login} options={{ 
                title: 'Login' ,
                headerLeft: () => (
                    <Icon name="arrow-left" size={23} />
                ),
                headerLeftContainerStyle: {
                    screenLeft: 50
                },
            }} />
        </Drawer.Navigator>
    </NavigationContainer>
);
};


export default App;

Answer 1

使用以下代码修复了它。

import { HeaderBackButton } from '@react-navigation/stack';

headerLeft: (props) => (
                <HeaderBackButton
                  {...props}
                  onPress={() => {
                    // Do something
                  }}
                />
            ),

Answer 2

尝试为图标组件手动添加样式。

<Icon name='' style={{ marginLeft: 10 }} />

React native header 左键左边距

React native header left button left margin

react-native

react-navigation-drawer