[React-Native] Stack | Header Bar 커스터마이징 & 버튼 추가

pictogram free

위 사이트에서 아무 사진 하나 다운로드 받아 src/assets/pics 폴더에 삽입

 

 

logoTitle = () => {
    return (
      <Image
        style={{width: 40, height: 40}}
        source={require('./src/assets/pics/파일이름.png')}
      
      />
    )
  }

  - 파일 source를 inline으로 받아올 때는 require() 사용

 

Home Screen

User Screen

 

---

• 코드 더 깔끔하게 작성하고 싶다면?

  -> 따로 클래스 정의하기

 

- 우리는 logo.js라는 파일을 만들어 LogoTitle라는 클래스를 생성해 import 해왔다.

- App.js에서 headerTitle을 <LogoTitle/>로 변경하면 똑같은 결과 !

 

 

 

---

 

•  User Screen에서 Back 버튼에 이미지가 아닌 Text를 입력하고싶다면?

headerBackTitle: 'BACK'

  - UserScreen 클래스 안의 headerStyle()에 headerBackTitle 삽입

 

 

render() {
    this.headerStyle();

  - 아래 render()에서 위 코드 주석 해지

 

  - BACK 텍스트 생성됨

 

 

---

 

• Home Screen에 버튼을 추가해보자

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

  - Button 삽입을 위한 클래스 import

 

<Stack.Screen 
            name="Home" 
            component={HomeScreen}
            options={{
              title: 'Home Screen',
              headerTitle: <LogoTitle/>,
              headerRight: () => (
                <Button
                  title="Info"
                  onPress={()=>alert('I am a button!!')}
                  color='orange'
                />
              )
            }}
          />

  - <Stack.Screen> 코드 안에 headerRight 속성 삽입

  - 일단 잘 동작하는지 alert 띄워보기

 

  - 오른쪽(headerRight)에 Info라는 버튼이 생겼고, 클릭했을 때 alert 창이 잘 뜬다 !

 

 

 

---

 

• User Screen에도 버튼 추가해보기

headerBackTitle: 'BACK',
          headerRight: () => (
            <Button
              title="Go Back"
              onPress={()=>{
                this.props.navigation.navigate('Home')
              }}
              color='orange'
            />
          )

  - 마찬가지로 headerStyle() 함수 안에 작성

  - 화면을 이동하는 이벤트(함수) 생성해보자

 

  - User Screen에서 우측 상단(headerRight)의 Go Back 버튼을 누르면 Home Screen으로 이동한다.

 

 

* 좌측의 BACK 버튼

  - default로 생성되는 백버튼

  - 정말로 그 단계로 돌아가기

 

* 우측의 Go Back 버튼

  - 우리가 만든 버튼

  - navigate 함수를 통해 hoem 화면으로 가게 만드는 것

  -> 여러 개의 화면을 가진다면, 다른 특정 screen으로 이동할 수 있을 것이다 !