[리액트네이티브] react-native header 헤더 꾸미기

최종 프로젝트는 아니지만

​

4학년 졸업 요건으로 종합프로젝트를 진행하고 있다!

여기에서도 아쉽게 또 프론트,,

사용자 어플리케이션을 만든다

​

상세한 내용은

노션에 정리했움!

​

그래서 바로 진행할거임!~!

​

​

헤더 만들기

원래는 그냥 컴포넌트를 가져와서 넣는게 대부분인데

​

나는 statck navigation을 사용하기 때문에

​

stack navigation을 커스텀 하기로 했다!!!

​

​

참고:

https://devbksheen.tistory.com/entry/React-Navigtion%EC%9D%98-Header-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0#%ED%--%A-%EB%-D%--%EC%-D%--%--%EC%A-%-C%EC%B-%A-%-C%--%ED%--%--%EC%-D%B-%ED%-B%--%-C%--%EC%-A%B-%EC%B-%A-%--%EC%--%--%EC%--%AD%EC%--%--%--%EB%-B%A-%EB%A-%B-%--%EC%BB%B-%ED%-F%AC%EB%--%-C%ED%-A%B-%--%EB%B-%B-%EC%--%AC%EC%A-%BC%EA%B-%B-

 

 

Stack.Screen 부분에서

css를 입려갛면 된다!!

​

그래서 Stack.Screen에서 사용할 수 있는 props들을 봐야겠다!!

 

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    headerLeft: ({onPress}) => (
      <TouchableOpacity onPress={onPress}>
        <Text>Left</Text>
      </TouchableOpacity>
    ),
    headerTitle: ({children}) => (
      <View>
        <Text>{children}</Text>
      </View>
    ),
    headerRight: () => (
      <View>
        <Text>Right</Text>
      </View>
    ),
  }}
/>

 

Bonglog 님 블로그 내 코드를 가져와서 분석하자면

​

상단의 이름은 Detail이고

component는 DetailScreen,

options로 왼쪽, 가운데, 오른쪽에 커스텀을 넣어준 것이다

​

TouchableOpacity가 들어가 있기 때문에

각 위치에서 event를 처리해주면 된다

​

​

그러면 진짜 끝!!