React 导航栏 header 左边有空白

Question

我正在使用 React-Navigation 和 StackNavigator 在我的 React Native 应用程序顶部实现一个导航栏，它显示居中的应用程序徽标和右侧的菜单按钮。我无法让它占据 header 容器的完整 space，但是左边总是有 ~20px 的边距。

正如您在我的代码中看到的，我已经将各种样式属性（例如 margin: 0、padding: 0、alignment: fill 和 width:100% 应用到 headerStyle、headerContainerStyle 和导航栏组件本身，但其中 none 有帮助。

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 phone 上我还有边距但是不能滑动。

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 a bit confusing. From my understanding, the difference between header and headerTitle is that headerTitle may also be a string and defaults to the scene title if the header component is not available. But that doesn't really explain the differences in layout. In the code example headerTitle 被使用了。

Answer 2

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

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

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

React 导航栏 header 左边有空白

React navigation bar header has a margin on the left

reactjs

react-native

react-native-navigation