설정 페이지 연결

위 그림에서 동그라미 친 부분을 클릭해서 일반 앱들의 개인정보 설정페이지도 들어가는 페이지를 만들어 보자.

HeaderComponent.jsx

import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
import { Header, Left, Icon, Right, Text, Button } from 'native-base';

const logo = require('../assets/logo.png');

export default function HeaderComponent({ navigation }) {
  
  const goPreferences = () => {
    navigation.navigate('PreferencesPage');
  };
  
  return (
    <Header transparent>
      <Left>
        <Button transparent>
          <Image source={logo} style={styles.logoImage} />
        </Button>
      </Left>
      <Right>
        <Icon name="ellipsis-horizontal" style={{ color: 'deeppink' }} onPress={goPreferences}/>
      </Right>
    </Header>
  );
}

const styles = StyleSheet.create({
  logoImage: { width: 100, resizeMode: 'contain', marginLeft: 10 },
});

먼저 상단 부분의 HeaderComponent.jsx "..."에 버튼을 달아주었다.

페이지 이름을 PreferencesPage.jsx로 하고 대충 화면을 다른 앱들의 설정 화면들 처럼 만들어 보면~

짜잔~ 아직 작동은 안된다. 다음은 파이어베이스로 가보자..