더북(TheBook)

그다음에는 MyProfileScreen에서 우측 상단에 설정 아이콘을 띄워보세요.

screens/MyProfileScreen.js

(...)
import {useNavigation} from '@react-navigation/native';
import IconRightButton from '../components/IconRightButton';

function MyProfileScreen() {
  const {user} = useUserContext();
  const navigation = useNavigation();

useEffect(() => {
  navigation.setOptions({
    title: user.displayName,
    headerRight: () => (
      <IconRightButton
        name="settings"
        onPress={() => navigation.push('Setting')}
        />
      ),
    });
  }, [navigation, user]);

  return <Profile userId={user.id} />;
}

export default MyProfileScreen;

내 프로필 화면의 우측 상단에 다음과 같이 설정 아이콘 버튼이 나타났나요? 버튼이 나타나지 않았다면 앱을 리로딩해보세요. 버튼을 눌렀을 때 아까 만든, 빈 SettingScreen이 보이는지 확인해보세요.

▲ 그림 9-23 설정 버튼

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.