React native + expo topbar 材质导航在顶部留下空白

Question

我正在尝试向 React Native 应用程序添加选项卡式导航，如果这很重要，也使用 expo，每当我这样做时，我都会在屏幕顶部看到一大块白色。不过，我没有看到是什么原因造成的，状态栏背景不应该将其向下推，据我所知，更改导航或主视图的高度样式没有任何作用。

这看起来像：

重新创建它的完整来源是：

// utils/colors.js
export const white = '#fff'
export const orange = '#f26f28'

// App.js
import React, { Component } from 'react'
import { StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import {
  createMaterialTopTabNavigator,
  createStackNavigator
} from 'react-navigation'
import { Constants } from 'expo'
import List from './components/List'
import Add from './components/Add'
import { orange, white } from './utils/colors'

function StatusBarBackground ({ backgroundColor, ...props }) {
  return (
    <View style={{ backgroundColor, height: Constants.statusBarHeight }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  )
}

const Tabs = createMaterialTopTabNavigator({
  List: {
    screen: List,
    navigationOptions: {
      tabBarLabel: 'List',
    },
  },
  Add: {
    screen: Add,
    navigationOptions: {
      tabBarLabel: 'Add',
    },
  },
}, {
  navigationOptions: {
    header: null
  },
  tabBarOptions: {
    activeTintColor: white,
    style: {
      height: 56,
      backgroundColor: orange,
      shadowColor: 'rgba(0, 0, 0, 0.24)',
      shadowOffset: {
        width: 0,
        height: 3
      },
      shadowRadius: 6,
      shadowOpacity: 1
    }
  }
})

const MainNavigator = createStackNavigator({
  Home: {
    screen: Tabs,
  },
})

export default class App extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBarBackground backgroundColor={orange} barStyle="light-content" />
        <MainNavigator />
      </View>
    )
  }
}

Add 和 List 组件只是一个带有文本的视图，两者看起来都类似于：

import React, { Component } from 'react'
import { View, Text } from 'react-native'

class Add extends Component {
  render() {
    return (
      <View>
        <Text style={{fontSize: 20}}>Add</Text>
      </View>
    )
  }
}

export default Add

Answer 1

您正在 Stack Navigator 中添加 Your Tab Navigator，这就是 Stack Navigator 显示白色标题的原因。

1) 如果你想添加标题，那么你的标题如下所示

const MainNavigator = createStackNavigator({
  Home: {
    screen: Tabs,
  },
},{
  navigationOptions:{
    headerStyle : {
      backgroundColor:'#243346'
    },
    headerTintColor:"#fff"
  },
})

2) 如果您想删除标题，那么您可以从 Stack Navigator 中删除您的 Tab Navigator，或者在 navigationOprions 对象中添加 headerMode:'none'。