反应原生标题左按钮左边距答案

【问题标题】：React native header left button left margin反应原生标题左按钮左边距
【发布时间】：2021-06-07 05:05:58
【问题描述】：

我正在尝试将左侧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;

【问题讨论】：

为什么不尝试直接给图标添加样式
太好了，这行得通，但我已经使用本地方法修复了它，我已经回答了我的问题。您的解决方案也有效。谢谢
将其添加为答案。如果它有效，请留下一个赞成票并标记为已接受。谢谢！

标签： react-native react-navigation-drawer

【解决方案1】：

使用下面的代码修复它。

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

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

【讨论】：

【解决方案2】：

尝试手动向 Icon 组件添加样式。

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

【讨论】：