React Native - 헤더 버튼 추가

React Native의 Navigation 헤더 버튼을 추가하는 방법은 두 가지가 있다.

그 동안 개발에서는 아래에 소개할 첫 번째 방법으로만 버튼을 생성해도 충분했다. 이번 프로덕션용 어플을 개발하는 도중에 screen 내 state와 상호작용이 필요한 event가 발생하여 props, recoil 등 방법을 구상해도 하나같이 만족스럽지 않아 찾아보니 간단한 기본 방법이 존재하여 정리한다.

 

1. Navigation options 활용

아래와 같이 Stack.Screen을 통해 원하는 화면에 커스텀 헤더 버튼을 좌우에 추가할 수 있다.

// navigation.tsx

...
<Stack.Screen
  name="Test2"
  component={Test2Screen}
  options={({navigation}) => ({
    headerShown: true,
    headerBackVisible: false,
    headerTitleAlign: 'center',
    headerLeft: () => <AngleLeft onPress={() => navigation.goBack()} />,
  })}
/>
...

 

 

2. useEffect 활용

위에 언급한 것처럼 해당 화면 내에서만 발생하는 event와 연결해야 될 헤더라면 useEffect를 활용하면 간단하게 해결된다.

// test2.tsx

// Header button
useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Pressable
          className="px-6"
          onPress={() => navigation.navigate('Main', {screen: 'Home'})}>
          <HomeOutlineIcon />
        </Pressable>
      ),
    });
}, [navigation]);

 

 

3. 실행

실행해보면 아래와 같이 헤더에 좌우버튼이 잘 추가된 것을 확인할 수 있다.