React native 反应本机页眉左按钮左边距

我正在尝试将左

填充

或

边距

添加到

标题左图标

，该图标是登录页面上的后退按钮。下面是我的代码，我尝试添加

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;

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*
*@格式
*@flow严格本地
*/
导入“反应本机手势处理程序”；
从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从“/src/settings/Colors”导入颜色；
从“react native”导入{样式表、状态栏、文本}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“./src/navigation/DrawerContent”导入{DrawerContent}；
从“./src/navigation/TabContent”导入{TabContent}；
从“/src/screens/auth/Login”导入登录名；
从“/src/screens/Feedback”导入反馈；
const Drawer=createDrawerNavigator（）；
常量应用=（）=>{
返回(
}屏幕选项={{
校长：是的，
headerTitleAlign:“中心”，
headerStyle:styles.headerBackgroundColor，
headerTitleStyle:styles.headerTitleStyle，
}}>
{/*  */}
(
),
头部左侧容器样式：{
屏幕左：50
},
}} />
);
};
导出默认应用程序；

---

使用下面的代码修复了它

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

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

从'@react navigation/stack'导入{HeaderBackButton}；
头部左侧：（道具）=>(
{
//做点什么
}}
/>
),

尝试手动将样式添加到图标组件

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

为什么不尝试将样式直接添加到图标中呢？很好，这是可行的，但我已经用本机方法修复了它，我已经回答了我的问题。你的解决方案也奏效了。谢谢你的回答。如果成功了，请留下一张赞成票，并标记为接受。谢谢