reactjs - React 导航栏标题左侧有边距

Question

我正在使用 React-Navigation 和 StackNavigator 在我的 React native 应用程序顶部实现一个导航栏，它显示应用程序 Logo 居中，菜单按钮位于正确的。虽然我无法让它占据标题容器的完整空间，但左侧始终有 ~20px 的边距。

如您在我的代码中所见，我已经应用了各种样式属性，例如 margin: 0、padding: 0、alignment: fill 和 width:100% 到 headerStyle、headerContainerStyle 和导航栏组件本身，但它们都没有帮助。

App.js:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import {Home} from "components/Home";
import {NavigationBar} from "components/NavigationBar";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer headerStyle={styles.container}>
      <Stack.Navigator
        initialRouteName="Home" headerStyle={styles.container}
        screenOptions={{
                        headerTitleContainerStyle: styles.container,
                        headerTitleStyle: styles.title,
                        headerStyle: styles.header,
                        headerTitle: props => <NavigationBar {...props} />
                      }}>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignment: 'fill',
    width: '100%',
    height:'100%',
    // useless
    margin: 0
  },
  title: {
  },
  header: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'red',
    // useless
    padding: 0,
    margin: 0,
    marginLeft: 0,
    alignment: 'fill',
    alignItems: 'center',
    alignContent: 'center'
  }
});

NavigationBar.jsx:

import React from 'react';
import { Button, StyleSheet, View } from 'react-native';

import { CenteredView } from 'shared/view/CenteredView'; // just a wrapper for View
import { FlexImage } from "shared/image/FlexImage"; // just a wrapper for Image
import { PLACEHOLDER } from "assets/images";

export const NavigationBar = (props) => {
    return (
        <View style={styles.barContainer}>
            <View style={{flex: 1, backgroundColor: 'green'}} />
            <CenteredView style={{flex: 2, backgroundColor: 'yellow'}}>
                <FlexImage source={PLACEHOLDER} />
            </CenteredView>
            <CenteredView style={{flex: 1, backgroundColor: 'green'}}>
                <Button title="Menu" color="#000" />
            </CenteredView>
        </View>
    );
}

const styles = StyleSheet.create({
    barContainer: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'orange',
        justifyContent: 'center',
        // useless
        alignment: 'fill',
        width: '100%',
        height: '100%',
        padding: 0,
        margin: 0,
        marginLeft: 0
    }
});

我为容器和 View 分配了不同的颜色来演示这个问题。红色列是错误的:

---

更新:我注意到我可以向左滑动整个页面，这样边距就会消失，内容容器的最左边(水蓝色)也会消失, 在右侧留下空白区域(见下图)。这仅适用于 Chrome 中的移动设备模拟器。在我的 Android 手机上，我仍然有边距但无法滑动。

Answer 1

我通过使用 header 属性而不是 headerTitle 将 NavigationBar 声明为我的自定义 header 组件来解决此问题。

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
                        headerStyle: styles.header,
                        header: props => <NavigationBar {...props} /> // <------- here
                      }}>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我找到了 documentation of StackNavigator options有点困惑。据我了解， header 和 headerTitle 的区别在于 headerTitle 也可能是一个字符串，如果标题组件是，则默认为场景标题无法使用。但这并不能真正解释布局上的差异。在code example headerTitle 被使用。