如何隐藏`createBottomTabNavigator`不允许使用`navgationOptions`实现的所有类的头部

问题描述

我的React Native代码的所有类都有自己的头，使用navigationOptions实现，我已经创建了bottomTabNavigator，它有自己的头，覆盖现有的头及其功能。如何在类自身标头正常工作的同时隐藏bottomTabNavigator标头？

我在bottomTabNavigator和header: { visible: false, }的堆栈中使用了header: null和navigationOptions: { header: null, }，但它不起作用，因为标头仍然可见。

import React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { Input, Icon, SearchBar, ListItem } from 'react-native-elements';

import Notification from './notification.js';
import Nearby from './nearby.js';
import Add from './add.js';

class MainScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = { search: '' };
  }

  static navigationOptions = {
    title: 'Contacts',
    headerLeft: null,
    headerRight: (
      <TouchableOpacity
        activeOpacity={0.6}
        style={{marginRight: 10,}}
        onPress={() => alert('Map is shown!')}>
        <Text style={{ color: '#3090C7', fontSize: 16 }}>View on Map</Text>
      </TouchableOpacity>
    ),
    headerTitleStyle: { width: '110%', textAlign: 'center', },
    headerStyle: { backgroundColor: '#E4E4E2' }
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#F3F3F3' }}>
        <SearchBar
          autoCorrect={false}
          placeholder='Search From Contacts'
          platform = 'ios'
          inputStyle = {styles.txt}
          onChangeText = {search => this.setState ({search})}
          value={this.state.search}
        />
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F3F3F3' }}>
          <Text> Successfully Logged-In </Text>
        </View>
      </View>
    );
  }
}

const HomeStack = createBottomTabNavigator({
  Home: { screen: MainScreen, header: { visible: false, } },
  Notification: { screen: Notification, header: null, },
  Nearby: { screen: Nearby, header: null, },
  Add: { screen: Add, header: null, },
});

const Home = createAppContainer(HomeStack);
export default Home;


const styles = StyleSheet.create({

  txt: {
    color: '#3090C7',
    fontSize: 18,
    fontWeight: '500',
  },

  btn: {
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  },
})

我希望bottomTabNavigator标头应该是隐藏的，而每个类的标头应该是可见的。

推荐答案

屏幕选项={{HeaderShown：False，标题：""，}}

这篇关于如何隐藏`createBottomTabNavigator`不允许使用`navgationOptions`实现的所有类的头部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！