stack or tab 스크린 이동 시 새로 고침

tab screen 이동할 때 새로 고침

---

• 옵션에unmountOnBlur: true 추가하면 해당 탭에 이동할 때 항상 새로 고침이 된다.

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import * as screens from 'screens';


const Tab = createBottomTabNavigator();

export default function TabStack() {
  ...

  const options = {
    ...
    unmountOnBlur: true,
    ...
  }

  return (
    <Tab.Navigator>
        ...
      <Tab.Screen
        name="MyPage"
        component={screens.MyPage}
        options={options}
      />
    </Tab.Navigator>
  );
}

tab or stack 스크린 이동할 때 lifecycle 실행하기

---

• 스크린을 이동 navigation.pop()(뒤로 가기)를 할 때 lifecycle 실행이 되지 않는데 lifecycle을 실행시키고 싶을 때 useIsFocused를 적용한다.

import {useIsFocused, useNavigation} from '@react-navigation/native';

export default () => {
  const isFocused = useIsFocused();
  
  import React, {useEffect} from 'react';
  
  ...
  
  useEffect(() => {
    getData();
  }, [isFocused]);
  
  ...
}