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中添加您的Tab Navigator，这就是Stack Navigator中显示白色标题的原因。

1）如果您想添加标题，请按照下面

设置标题样式

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

2）如果要删除标题，则可以从Stack Navigator中删除Tab Navigator，或在headerMode:'none'对象中添加navigationOprions。

React native + expo topbar材质导航在顶部

1 个答案: