react-native 自定义 header 导航器有多余的边距

Question

我有抽屉和堆栈导航器。我禁用了抽屉和堆栈导航器的 header。并创建我自己的 header 组件，但我无法摆脱自定义 header 组件的边距。

[截图] https://i.stack.imgur.com/5jWv3.png

const styles = StyleSheet.create({

header: {
  backgroundColor: 'purple',
  width: '100%',
  height: '100%',
  flexDirection: 'row',
  alignItems: 'center',
},

headerText: {
  fontWeight: 'bold',
  fontSize: 21,
  letterSpacing: 1,
  paddingLeft: 45,
  paddingBottom: 2,
},

icon: {
  fontSize: 30,
  color:"white",
  position: 'absolute',
  zIndex: 3,
}});

 return (
          <View style={styles.header}>
            <View style={styles.header}>
              <MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
              <Text style={styles.headerText}>{titleName}</Text>
            </View>
          </View>
      )

Answer 1

这是您的 header 组件。您是否检查过主容器是否在屏幕中没有 paddingHorizontal？

Answer 2

解决方案 #1 变化：

 return (
          <View style={styles.header}>
            <View style={styles.header}>
              <MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
              <Text style={styles.headerText}>{titleName}</Text>
            </View>
          </View>
      )

至：

 return (
            <View style={styles.header}>
              <MaterialIcons style={styles.icon} name="menu" onPress={openMenu}/>
              <Text style={styles.headerText}>{titleName}</Text>
            </View>
      )

解决方案#2

import {Dimensions} from 'react-native'

let width=Dimensions.get('screen').width
let height=Dimensions.get('screen').height

然后：

const styles = StyleSheet.create({
header: {
  backgroundColor: 'purple',
  width: width,
  height: height,
  flexDirection: 'row',
  alignItems: 'center',
},
})

Answer 3

我解决了在网络上打开应用程序以查看父元素样式的问题。在这种情况下，我的父元素是主页选项卡。

我刚刚在网上查看了样式

marginLeft: 16,
marginRight: 16,
maxWidth: 470,

并用

覆盖这些样式

marginLeft: 0,
marginRight: 0,
maxWidth: '100%',

screenshot of the solution result

<Stack.screen
   options={{headerBackgroundContainerStyle: {    
      marginLeft: 0, 
      marginRight: 0, 
      maxWidth: '100%'
     }
   }}
/>

react-native 自定义 header 导航器有多余的边距

react-native custom header navigator has unwanted margins

styling

react-native