我的React Native
代码的所有类都有使用navigationOptions
实现的标头,并且我创建了bottomTabNavigator
,它的标头覆盖了现有标头及其功能。在自己的类头正常工作时,如何隐藏bottomTabNavigator
头?
我在header: null
和navigationOptions: { header: null, }
的堆栈中使用了bottomTabNavigator
和header: { visible: false, }
,但是由于标题仍然可见,所以它没有用。
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
的标题应该隐藏,每个类的标题都应该可见。