[RN 프로젝트] #6 리액트 네이티브 커스텀 네비게이션 헤더 NavigationHeader 컴포넌트 생성하기

💡구현 목표

- 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기

 

자식 컴포넌트로 아래 인자들을 prop로 전달하고

오른쪽 아이콘을 렌더링시킬지, 왼쪽 아이콘을 렌더링 시킬지 혹은 둘다 렌더링 시킬지 아래와 같이 조건문으로 분기 처리

전체 소스

import React from "react";
import {View, TouchableOpacity, StyleSheet} from "react-native";
import {useNavigation} from "@react-navigation/native";
import Icon from "react-native-vector-icons/Ionicons"
import { defaultFontText as Text } from "../components/Text";

const NavigationHeader = ({title, leftIcon, leftIconName, rightIcon,rightIconName, rightIconName2, onPressLeft, onPressRight, onPressRight2}) => {

  const navigation = useNavigation();

  if(leftIcon && rightIcon){
    return (
      <View style={styles.container}>
        {(navigation) ?
          (<View style={styles.leftContainer}>
            <TouchableOpacity onPress={onPressLeft}>
              <Icon name={leftIconName} size={24}/>
            </TouchableOpacity>
          </View> ) : null
        }
          <Text style={styles.middleContainer}>{title}</Text>
        {(navigation) ?
          (<View style={styles.rightContainer}>
            <TouchableOpacity onPress={onPressRight}>
              <Icon name={rightIconName} style={styles.rightIcon} size={24}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={onPressRight2}>
              <Icon name={rightIconName2} style={styles.rightIcon} size={24}/>
            </TouchableOpacity>
          </View> ) :null
        }
      </View>
    )
  }else if(leftIcon) {
    return (
      <View style={styles.container}>
        {(navigation) ?
          (<View style={styles.leftContainer}>
            <TouchableOpacity onPress={onPressLeft}>
              <Icon name={leftIconName} size={24}/>
            </TouchableOpacity>
           </View> ) : null
        }
        <Text style={styles.middleContainer}>{title}</Text>
      </View>
    )
  }else if(rightIcon){
    return (
      <View style={styles.container}>
        <Text style={styles.middleContainer}>{title}</Text>
        {(navigation) ?
            (<View style={styles.rightContainer}>
            <TouchableOpacity onPress={onPressRight} >
              <Icon name={rightIconName} style={styles.rightIcon} size={24}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={onPressRight2}>
              <Icon name={rightIconName2} style={styles.rightIcon} size={24}/>
            </TouchableOpacity>
            </View> ) : null
        }
      </View>
    )
  } else {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
   --스타일 코드 생략
  });

  export default NavigationHeader;

 

각 화면에 네비게이션 헤더 적용한 모습