상단 바 만들기

<(ex) 카카오톡 상단 바> 

 

 

 

SafeAreaView : 상단바에서 어느 정도 떨어져서 화면이 보이도록 실행

-> 이거를 라이브러리 이용하는 방법 react-native-iphone-x-helper

 

 

#Header.js

 

import React from 'react';

import { Text, View } from 'react-native';

import { Ionicons } from '@expo/vector-icons'; // expovectoricon : 아이콘 사이트에서 가져오겠다

const IconButton = (props) => { //아이콘 생성 :  반복해서 사용할 것이니까 컴포넌트화 ,  props 사요

  return ( // paddingHorizontal : 양옆 패딩, 즉 아이콘들 사이의 패딩

    <View style={{ paddingHorizontal: 6 }}>

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

   

    </View>

   

  )

}

const Header = () => {

  return (

    // row : deafault값이 세로임 따로 가로로 아이콘 병렬 하려면 row 설정

    //jusiyContent : 양 옆으로 아이콘들이 배치 하게끔

    //paddingVertical :  위 아래 패딩 (header의 패딩을 정해줌 )

    <View style={{flexDirection:"row",justifyContent:"space-between", paddingVertical: 10}}>

       

      <Text style={{fontSize: 22, fontWeight:"bold"}}>친구</Text>

       

      <View style={{flexDirection:"row"}}>

        <IconButton name="search-outline" />

        <IconButton name="person-add-outline" />

        <IconButton name="md-musical-notes-outline" />

        <IconButton name="ios-settings-outline" />

      </View>

    </View>

  )// 위 name="search-outline" 이게 IconButton 의 Ionicons name={props.name} 의 {props.name} 여기에 넘어가 출력 하게됨

}

export default Header;

 

 

 

 

 

App.js

 

 

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View } from 'react-native';

import Header from './Header.js';

 

export default function App() {

  return (

    <View style={styles.container}>

      <Header/>

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',   // 아이템들을 가운데로(가로) 

    //justifyContent: 'center', // 아이템들을 가운데로(세로) 

    paddingVertical:80 // 위아래 패딩

  }

});