反应导航并配置标头为空和自定义标头

时间:2018-12-20 21:50:00

标签: javascript react-native react-navigation native-base

设置简单的堆栈导航后。我尝试使用来自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 />
    }
  }
})

1 个答案:

答案 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'
  }
});