设置简单的堆栈导航后。我尝试使用来自naviveBase的自定义标头来自定义标头,但是添加新标头后,旧标头仍出现在新标头的背景上。因此,请有人可以澄清是否可以使用自定义标题并删除react-navigation标题吗?
export const HomeStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
headerStyle,
header: <SearchBar />
}
}
})
我试图按照他们所说的使用null,但是没有显示新标题
export const HomeStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: {
headerStyle,
header: null && <SearchBar />
}
}
})
答案 0 :(得分:0)
将此HeaderCommon.js
文件放在公用文件夹中:
HeaderCommon.js
import React from 'react';
import { View,TouchableOpacity,StyleSheet, Image} from 'react-native';
import { Header, Button, Left, Right, Body } from 'native-base';
import PropTypes from 'prop-types';
import Icon from "react-native-vector-icons/MaterialIcons";
export default function HeaderCommon({
onPressLeft,
onPressRight,
Headerstyle= styles.header,
label="",
textProp=styles.text,
iconLeft="",
iconRight="",
images=require('../assets/emiselogo.png'),
ImageStyle=styles.ImageStyle,
}) {
return (
<View style={Headerstyle}>
<Left>
<TouchableOpacity transparent onPress={onPressLeft} style={{marginHorizontal:20}}>
<Icon style={{color:'white',fontSize:30}} name={iconLeft} />
</TouchableOpacity>
</Left>
<Body>
{/* <Title style={textProp}>{label}</Title> */}
<Image source={images} style={ImageStyle} />
</Body>
<Right>
<Button transparent onPress={onPressRight} style={{marginLeft:5}}>
<Icon style={{color:'white'}} name={iconRight} />
</Button>
</Right>
</View>
);
}
Header.propTypes = {
onPressLeft: PropTypes.func,
onPressRight: PropTypes.func,
label: PropTypes.string,
Headerstyle: PropTypes.any,
textProp: PropTypes.any,
iconLeft:PropTypes.any,
iconRight:PropTypes.any,
disabled:PropTypes.any,
image:PropTypes.any,
ImageStyle:PropTypes.any
};
const styles = StyleSheet.create({
header: {
height:70,
backgroundColor:'#6d6d6d',
flexDirection:"row",
},
text: {
color:'white',
fontSize:16
},
ImageStyle: {
height:50,
width:50
}
});
现在将其导入到您想使用的位置
另一个组件并在此处导入Header
/** @Profile setting */
import React, { Component } from "react";
import {
View,
StyleSheet,
TouchableOpacity,
Image,
TextInput,
AsyncStorage,
Alert,
BackHandler,
SafeAreaView,
Linking
} from "react-native";
import {
Container,
Text,
FooterTab,
Button,
Content,
Title,
Header,
Footer,
Card,
CardItem,
Body,
List,
ListItem,
Left,
Right
} from "native-base";
import Icon from "react-native-vector-icons/MaterialIcons";
import { Actions } from 'react-native-router-flux';
import { Avatar } from 'react-native-elements';
import ActivityLoader from "../common/Activityloader";
import HeaderCommon from '../common/Header';
export default class ProfileSettings extends Component {
constructor(props) {
super(props);
this.state = {
id: '',
pic: '',
name: '',
email: '',
token: '',
loading: false,
imageData: '',
avatar: '',
avatar_string: '',
}
}
render() {
return (
<Container>
<HeaderCommon onPressLeft={Actions.pop}
iconLeft="arrow-back"
images={require('../assets/emiselogo.png')}
ImageStyle={{height:70,width:70}}/>
<Content style={styles.ContentBodyView}>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
ContentBodyView:{
backgroundColor:"#f3f3f3",
flex:1
},
ListContainerView:{
height:50,
flex:1,
flexDirection:'row',
backgroundColor:'white',
justifyContent:'space-between',
alignItems:'center'
}
});