React Native添加导航器后Header与内容间空白消除方法咨询

你遇到的这个空白大概率是两个常见原因导致的——要么是StackNavigator默认自带了顶部导航栏，要么是布局容器/组件本身存在默认的间距样式。下面给你两种针对性的解决办法：

办法1：隐藏StackNavigator自带的导航栏 #

StackNavigator默认会给每个页面自动添加一个顶部导航栏，这很可能就是你看到的空白来源。你只需要在导航器的配置项里加上headerMode: 'none'就能彻底去掉它：

const AppNavigator = StackNavigator(
  { 
    Cluster1: { screen: Cluster1 }, 
  },
  {
    headerMode: 'none' // 关键配置：隐藏默认导航栏
  }
);

办法2：检查并清除布局的默认间距 #

如果上面的方法没用，那就要排查样式配置的问题了：

• 检查styles.container是不是设置了paddingTop或者marginTop，如果有的话把它设为0；
• 检查你的Header组件底部是不是加了marginBottom样式，或者AppNavigator对应的容器有没有marginTop；
• 另外，你可以给AppNavigator外层包一个View，强制设置顶部间距为0，比如：

修改后的App组件示例：

export default class App extends React.Component { 
  render(){ 
    return ( 
      <View style={{flex: 1, padding: 0, margin: 0}}> {/* 清除容器默认间距 */}
        <Header/> 
        <View style={{marginTop: 0}}>
          <AppNavigator/> 
        </View>
      </View> 
    ); 
  } 
}

要是还是没解决，可以把Header组件的完整代码贴出来，我帮你看看是不是组件内部的样式导致的~

内容的提问来源于stack exchange，提问作者user9673740