React-Native 상단 Bar 만들기

1. 고려해줘야 할 부분 

우선 휴대폰 화면을 보면 맨 상단에는 베터리 잔량 및 알림들이 나열 되고 있고, 하단 bar에는 홈으로, 나가기 버튼 등이 있다. 

우리가 이것들의 영역을 고려하지 않고 앱을 만든다면, 내가 만든 앱의 상단 바가 핸드폰의 베터리 잔량이나 알림 부분과 겹칠 수 있다! 

올바른 예이다. 만약 우리가 핸드폰의 상단바 크기를 고려하지 않으면, 받은메일함3이 시계와 겹칠 것 이다.

2. 핸드폰의 고유 상단, 하단 영역을 침범하지 않는 앱을 만드는 조치 2가지 

(1) SafeAreaView 사용 

// 장착
import { SafeAreaView } from 'react-native';

// SafeViewArea 이용
    <SafeViewArea style={styles.container}>
      <Header />
    </SafeViewArea>

해당 컴포넌트 이용 시, 자동으로 핸드폰 자체 상단 하단 바를 침범하지 않고 그 안쪽에서 작업을 할 수 있게 해준다. 

해당 <Header />는 자동으로 안쪽 영역에서 작업이 이루어진다. 

하지만 해당 컴포넌트는 상단과 하단을 자동으로 측정하기 때문에, 때때로, 내가 만든 앱이 너무 화면 중앙에 몰려 작성된다. 

이것이 단점이다. 

이러한 문제는 앱 자체의 어색함을 줄 수 있으므로 다음 방법을 이용하자 

 

(2) getStatusBarHeight, getBottomSpace 컴포넌트 이용

해당 컴포넌트들은 gitHub에 react-native-iphone-x-helper에 올라온 컴포넌트 들이다. 

GitHub - ptelad/react-native-iphone-x-helper: A library to help you design your react-native app for notched iPhones

GitHub - ptelad/react-native-iphone-x-helper: A library to help you design your react-native app for notched iPhones

해당 태그를 이용하면, 아이폰, 안드로이드 둘의 상단과 하단의 height를 얻을 수 있다. 

// 장착
import { getStatusBarHeight, getBottomSpace } from 'react-native-iphone-x-helper'

// 변수로 받기 
// 해당 변수에는 각각 상단 바의 높이, 하단 바의 높이가 들어간다. 
// getStatusBarHeight()는 boolean 값 인수를 넣어야 하는데, true를 넣어야, 핸드폰 상단바 크기를 얻겠다는 것이다.
const statusBarHeight = getStatusBarHeight(true);
const bottomSpace = getBottomSpace();

// 아이폰은 이렇게 상단,하단바 길이를 수동으로 출력해야한다.
// 안드로이드는 그럴 필요 없다.
// `` 이거 쓰면 안에 {} 탬플릿으로 변수의 값을 구할 수 있다. %n %s 쓰듯이 쓴다.
console.log(`${Platform.OS}: ${statusBarHeight}, ${bottomSpace}`)


const styles = StyleSheet.create({
  container: {
    flex: 1,
    
    //view 전체의 CSS에서 위쪽 패딩을 statusBarHeight만큼 줬다.
    // padding은 안쪽 여백인데, 상단바 크기 만큼 안 쪽으로 들어간 것이다.
    paddingTop: statusBarHeight,
    backgroundColor: '#fff',
  },
});

 

3. 아이콘 맛집

@expo/vector-icons@13.0.0

@expo/vector-icons directory

여기서 아이콘을 검색하면 해당 아이콘을 쓸 수 있는 import와 사용방법이 나와 있음 

import { Ionicons } from '@expo/vector-icons';

<Ionicons name={props.name} size={24} color="black" />

//속성은 3개로 아이콘 이름, 크기, 색깔이다.

4.잡다한 지식

(1)export 더 자세히 

// 파일 이름 Header.js
// Header라는 component를 해당 파일의 대표 (default) component로 지정해 export

const Header () => {}
export default Header;

// 위를 더 간결하게 쓴 것
export default () => {}

export default 하면 해당 파일에서 딱 하나의 component만 export 되는데, 그 대표 component를 지정하는 것이다. 

default로 지정한 컴포넌트는 import 시 구조 분해 과정을 안 거쳐도 되고, 이름도 마음대로 해도 된다. 

default로 export 안했다면 import 시 무조건 컴포넌트 이름을 동일하게 가져가야 하고, 구조 분해도 써야 한다.

import Header from "./Header.js"

import Header222 from "./Header.js"

// 뭐든 상관 무 





만약에 Header를 default로 export 안 한 경우 import 시 구조 분해가 필요하다.

/*
해더 파일 안
const Header () => {}

export Header
*/

import {Header} form "./Header.js"

5. 코드 리뷰

/*Header.js 안*/

import { View, Text,StyleSheet } from "react-native"
import { Ionicons } from '@expo/vector-icons';

const IconButton = (props) => {
  return(
    <View style={{paddingHorizontal: 6}}>
      <Ionicons name={props.name} size={24} color="black" />
    </View>
  )
};

export default () => {
  return (
    <View style={styles.headerContainer}>
      <Text style={styles.title}>친구</Text>
      <View style={{flexDirection: "row"}}>
        <IconButton name="search-outline"/>
        <IconButton name="person-add-outline"/>
        <IconButton name="musical-notes-outline"/>
        <IconButton name="settings-outline"/>

      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  headerContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 10,


  },

  title: {
    fontSize: 22,
    fontWeight: "bold"
  }
})

/*App.js 안*/
import { StatusBar } from 'expo-status-bar';
import { Platform, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { getStatusBarHeight, getBottomSpace } from 'react-native-iphone-x-helper'
import Header from './src/Header';

const statusBarHeight = getStatusBarHeight(true);
const bottomSpace = getBottomSpace();

console.log(`${Platform.OS}: ${statusBarHeight}, ${bottomSpace}`)


export default function App() {
  return (
    <View style={styles.container}>
      <Header />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: statusBarHeight,
    backgroundColor: '#fff',
  },
});

6. 스스로 해보기

상단 바 하단 바에 대한 선언은 전역변수로서 app() 컴포넌트 밖에서 이루어져야 한다.