앱개발 3주차_06

페이지 헤더 스타일 수정

• 페이지 헤더 변경 후의 모습입니다.

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';

//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();


const StackNavigator = () =>{
    return (

        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "white",
                    borderBottomColor: "white",
                    shadowColor: "white",
                    height:100
                },
                //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
                headerTitleAlign:'left',
                headerTintColor: "#000",
                headerBackTitleVisible: false
            }}
            
        >

            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>
    )
}

export default StackNavigator;

• 공식문서에서 쓸 수 있는 옵션 값들 확인하여 적용하면 보기 좋게 만들 수 있습니다.!(CTRL+F 로 검색하기)

페이지 이동하기

실제 페이지 이동하는 것을 구현해보겠습니다.

• Stack.screen에 등록된 모든 페이지 컴포넌트들은 navigation 와 route 라는 딕셔너리(객체)를 속성으로 넘겨받아 사용할 수 있습니다.

            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>

• navigation

//해당 페이지의 제목을 설정할 수 있음
  navigation.setOptions({
   title:'나만의 꿀팁'
})
//Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수
navigation.navigate("DetailPage")

• route

//name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서 
//두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{
  title: title
})

//전달받은 데이터를 받는 route 딕셔너리
//비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
//navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이기 때문입니다.
/*
  {
		route : {
			params :{
				title:title
			}
		}
	}

*/
const { title} = route.params;

params는 파라미터(넘겨받는값)의 줄임말입니다

공유하기 기능

• 공유하기 기능은 리액트 네이티브에서 지원하는 공유 기능을 사용합니다.

Shere import 해주기

import { Share } from 'react-native';

Shere 코드 살펴보기

• 공유하기 함수 만들기

const share = () => {
		// 리액트네이티브 상자에서 Share기능을 꺼내서 사용
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`, //백틱 사용하여 화면에 띄울 메시지 작성하기
        });
    }

• 버튼에 함수 연결하기(버튼을 눌렀을때 share 함수가 작동합니다)

<TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>팁 공유하기</Text></TouchableOpacity>

외부링크 클릭 이벤트!

엑스포에서 제공해주는 도구 설치하기

• 터미널에서 설치하기
  expo install expo-linking

도구 불러오기

import * as Linking from 'expo-linking';

코드 살펴보기

const link = () => {
//Linking은 openURL이라는 함수를 가지고 있습니다 
        Linking.openURL("https://spartacodingclub.kr")
    }

3주차 숙제 해설

어바웃 화면 페이지화 시키고 버튼 추가하기!

• AboutPage.js를 스택 네비게이터에 연결하기

import AboutPage from '../pages/AboutPage';
...
<Stack.Screen name="AboutPage" component={AboutPage}/>

• MainPage에 소개 페이지 버튼 생성하기

<TouchableOpacity style={styles.IntroduButton} onPress={()=>{navigation.navigate('AboutPage')}}><Text style={styles.middleButtonTextAll}>소개 페이지</Text></TouchableOpacity>

• AboutPage.js 페이지에서 타이틀 설정+꾸미기, 버튼에 링크 걸기

• <StatusBar/> light로 설정하기

• 주의!!

• 윗 부분에서 import를 할때 useEffect는 'react'에서 import 해야 한다.

  import React,{useEffect} from 'react'
  
  //navigation,route를 인자로 받아와야 한다.
  export default function AboutPage({navigation,route}){
  
     useEffect(()=>{
         navigation.setOptions({
             title:"소개 페이지",
             headerStyle: {
                 backgroundColor: '#1F266A',
                 shadowColor: "#1F266A",
             },
             headerTintColor: "#fff",
         })
     },[])
     return (<View style = {styles.container}>
         <StatusBar style = "light"/>

  찜 상태 데이터로 찜 화면 구현하기

• pages 폴더에 LikePage.js 만들기

• 메인페이지에서 꿀팁찜 버튼을 누르면 LikePage로 이동하게 네비게이터 설정하기

• Card.js 복붙해서 찜 페이지에서만 사용하는 LikeCard.js 만들기

  • 찜 목록도 Card.js와 크게 다를 건 없기 때문에 코드를 복사해서 LikeCard.js를 만들어보겠습니다!

• StackNavigator.js 에서 LikePage 불러오고 페이지화(컴포넌트화) 시켜주기

import LikePage from '../pages/LikePage';
...
<Stack.Screen name="LikePage" component={LikePage}/>

• MainPage로 부터 navigation 속성을 전달받아 LikeCard 컴포넌트 안에서 사용

export default function LikeCard({content,navigation})

• MainPage.js에서 꿀팁찜버튼에 LikePage.js연결하기

            <TouchableOpacity style={styles.middleButton04} onPress={()=>{navigation.navigate('LikePage')}}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>

• LikePage 코드 작성하기
  • useState,useEffect import해주기
  • 카드 틀 형태를 가지고 있는 LikeCard import해주기
  • 반복문 map사용해서 tip상태데이터 그려주기

import React,{useState,useEffect} from 'react'
import LikeCard from '../components/LikeCard';
...
<ScrollView style={styles.cardContainer}>
            {/* 하나의 카드 영역을 나타내는 View */}
            {
            tip.map((content,i)=>{
                return (<LikeCard content={content} key={i} navigation={navigation}/>)
            })
            }
        </ScrollView>