[React Native] 3-11 검색 기능 구현하기 (1)

이제 검색 기능을 만들려면 헤더 부분에 텍스트를 입력하여야 함으로

 

헤더를 커스터마이징해야 합니다.

 

MainTab 컴포넌트에서 화면에 따라 제목을 다르게 설정하기 위해

 

getHeaderTitle라는 함수를 만들었습니다.

 

네이티브 스택 네비게이터의 headerTitle 옵션에는 문자열이 아닌 JSX를 넣어줄수도 있습니다.

 

우선 SearchHeader 컴포넌트를 생성하겠습니다.

 

conponents/SearchHeader.js

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

function SearchHeader() {
  return <Text style={styles.block}>Hello</Text>;
}

const styles = StyleSheet.create({
  block: {
    color: 'white',
    backgroundColor: 'blue',
  },
});

export default SearchHeader;

 

임시로 배경이 파란색인 Text를 보여주도록 설정했습니다.

 

이제 이 컴포너느를 검색 화면일 때 headerTitle로 지정하겠습니다.

 

screens/MainTab.js

import SearchHeader from '../components/SearchHeader';

(...)


      <Tab.Screen
        name={'Search'}
        component={SearchScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="search" size={size} color={color} />
          ),
          headerTitle: () => <SearchHeader />,
        }}
      />
    </Tab.Navigator>
  );
}

export default MainTab;

 

ios 는 컴포넌트가 중앙에 정렬되고 , 안드로이드는 좌측에 정렬됩니다

 

우리는 타이틀이 헤더의 일부 영역만 사용하지 않고 전체 영역을 사용하도록 만들것 입니다.

 

그렇게 하려면 화면의 크리를 가져온 다음 해당 ㄱ밧을 참고해

 

dp 단위의 크기를 직접 설정해줘야 합니다.

---

화면 크기 조회하기

화면 크기를 가져오는 방법은 두가지입니다.

 

첫번째는 Dimensionsget를 사용하는 방법입니다.

 

import {Dimensions} from 'react-native';

const {width, height} = Dimensions.get('window');

 

Dimensions.get에는 두 가지 문자열을 넣을 수 있습니다.

 

'window'를 사용하면 현재 앱에서 사용할 수 있는 영영의 크기를 가져옵니다.

 

'screen'을 사용하면 전체 화면의 크기를 가져옵니다.

 

ios에서는 둘 사이에 차이가 없지만

 

안드로이드는 차이가 있습니다.

 

안드로이드에서 'window'를 조회했을 때는 상단의 상태 바와 

 

하단의 소프트 메뉴 바 영역을 제외한 크기를 반영합니다.

 

이 방법은 컴포넌트 외부에서도 작동함으로 StyleSheets에서 사용할 수 있습니다.

 

화면의 방향을 바꾸거나 ,폴더ㄹ블 디바이스를 사용하면 이 크기가 바뀔수도 있기 때문에

 

Dimensions.addEventListener 와 Dimensions.removeEventListener를 사용하여 

 

크기가 변경되는 이벤트에 대비해야 합니다.

import React, lusestate, useEffect} from 'react'
import (View, Dimension} from 'react-native';


function MyComponent () {
    const [dimension, setDimension] = usestate(Dimensions. get('window ");
    useEffect(() =› {
        const eventListener = ({window, screen}) => {
        	setDimension (window);
    }
    Dimensions. addEventListener ('change', eventListener);
    return () =› {
    	Dimensions. removeEventListener('change', eventlistener);
    }
}, []);

(...)

 

두번째 방법은 useWindowDimensions Hook을 사용하는 것입니다.

 

Dimensions.get과 달리 화면 크기가 바뀌는 상황에 

 

직접 대비할 필요가 없습니다.

 

Hook 형태로 사용하기 때문에 값이 바뀌면 컴포넌트에서 자동으로 바뀝니다.

 

import React from 'react';
import {useWindowDimensions} from 'react-native';

function myComponents (){
	const {width, height} = useWindowDimensions();
}

 

이 방법은 함수 컴포넌트 내부에서만 사용 가능하며

 

전체 화면의 크기를 가져오는 기능은 없습니다.

 

하지만 두 번째 방법이 코드가 더 간결하기 때문에 이 방법을 사용하여 

 

SearchHeader 컴포넌트를 수정하겠습니다.

 

components/Searchheader.js

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

function SearchHeader() {
  const {width} = useWindowDimensions();
  return <View style={[styles.block, {width: width - 32, height: 24}]} />;
}

const styles = StyleSheet.create({
  block: {
    color: 'white',
    backgroundColor: 'blue',
  },
});

export default SearchHeader;