React 导航栏标题在左侧有一个边距答案

【问题标题】：React navigation bar header has a margin on the leftReact 导航栏标题在左侧有一个边距
【发布时间】：2020-12-01 14:28:29
【问题描述】：

我正在使用 React-Navigation 和 StackNavigator 在我的 react native 应用程序顶部实现一个导航栏，其中显示了应用程序徽标居中和右侧的菜单按钮。我无法让它占据整个头部容器的空间，左边总是有 ~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
    }
});

我为容器和视图分配了不同的颜色来演示问题。红柱是什么问题：

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

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

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

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。

【讨论】：

【解决方案2】：

尝试了header 组件，但内容转到下一行，如果有人能提出更好的方法来处理这种情况，我会很高兴

解决方案：我使用了headerTitle 组件，但对右填充稍作修改以解决此问题。

我想建议React navigation Team 提供对样式的更多控制。

【讨论】：