스파르타_3주차 (각종 기능; 카테고리, 상태바, 네비게이션, 공유, 링크)

1. 카테고리 (category)

 

각각의 데이터들이 담긴 카테고리버튼을 만들어놓고

그 카테고리를 관리할 방식을 함수로 입력

const category = (cate) => {    if(cate == "전체보기"){       setCateState(state)    }else{       setCateState(state.filter((d)=>{          return d.category == cate       }))    } }

Card.js 데이터엔 모든 정보들이 각각의 카테고리에 담아두고

 

메인페이지에서 각 버튼 별로 담긴 데이터들을 불러오도록 한다

 

 

2. 상태바 (Status Bar)

 

모바일 앱 위 상태바 변화를 줄 수 있다

 

- 먼저 VS Code에서 expo 상태바를 설치하기

expo install expo-status-bar

- 메인페이지에서 상태바 구현하기

import { StatusBar } from 'expo-status-bar'; 상태바 불러오기   return ready ? <Loading/> :  (     <ScrollView style={styles.container}>       <StatusBar style="light" /> <View> 아래에 상태바 스타일 함수 추가 light = 하얗게 black = 거멓게        . . .         </ScrollView>)

 

3. 네이게이션

 

쉽게, 필요한 페이지 또는 공간으로 이동시켜주는 기능

 

페이지 = Stack.Screen

책갈피 = Stack.Navigator

 

- 먼저 VS Code 터미널에서 네이게이션 코드 설치하기

1) yarn add @react-navigation/native 2) expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 3) yarn add @react-navigation/stack

- naviation 폴더 생성 -> StackNavigator.js 파일 생성

- 스택 네비게이터 코드 입력

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 (         <Stack.Navigator             screenOptions={{                 headerStyle: {                     backgroundColor: "black",                     borderBottomColor: "black",                     shadowColor: "black",                     height:100                 },                 headerTitleAlign: 'left',                 headerTintColor: "#FFFFFF",                 headerBackTitleVisible: false                    * 헤드 스타일, 배경 바꿔보면서 설정             }}                      >             <Stack.Screen name="MainPage" component={MainPage}/>             <Stack.Screen name="DetailPage" component={DetailPage}/>         </Stack.Navigator>     ) } export default StackNavigator;

- 네비게이션 코드는 가장 상위 페이지에 달기

 

App.js 파일에 네비게이터 장착

import React from 'react'; import { StatusBar } from 'expo-status-bar'; import {NavigationContainer} from '@react-navigation/native'; import StackNavigator from './navigation/StackNavigator' export default function App() {   console.disableYellowBox = true;   return (    <NavigationContainer>     <StatusBar style="black" />     <StackNavigator/>  </NavigationContainer>); }

- MainPage.js 에서 title 코드 삭제

- 페이지마다 navigation, route 속성 부여하기

 

MainPage.js에서 네비게이션 속성 추가하기

return (<Card content={content} key={i} navigation={navigation}/>)

- Card.js 페이지에 네이게이션 속성 부여하기

import React from 'react'; import {View, Image, Text, StyleSheet,TouchableOpacity} from 'react-native' //MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용 export default function Card({content,navigation}){     return(         <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage')}}>             <Image style={styles.cardImage} source={{uri:content.image}}/>             <View style={styles.cardText}>                 <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>                 <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>                 <Text style={styles.cardDate}>{content.date}</Text>             </View>         </TouchableOpacity>     ) }

TouchableOpacity 버튼에 onPress 기능으로 네비게이션 경로 설정하기

onPress={()=>{navigaion.navigate('이동할페이지명')}}

 

- DetailPage.js 에도 네비게이션 속성 추가하기

 

import React,{useState,useEffect} from 'react'; import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert } from 'react-native'; export default function DetailPage({navigation,route}) {     const [tip, setTip] = useState({         "idx":9,         "category":"재테크",         "title":"렌탈 서비스 금액 비교해보기",         "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",         "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",         "date":"2020.09.09"     })      페이지내용을 한 조각 입력해두면 페이지 로딩 시 오류가 안생긴다고 함.     useEffect(()=>{         console.log(route)         navigation.setOptions({             title:route.params.title,             headerStyle: {                 backgroundColor: '#000',                 shadowColor: "#000",             },             headerTintColor: "#fff",         })         setTip(route.params)     },[])     const popup = () => {         Alert.alert("팝업!!")     }     return (          <ScrollView style={styles.container}>             <Image style={styles.image} source={{uri:tip.image}}/>             <View style={styles.textContainer}>                 <Text style={styles.title}>{tip.title}</Text>                 <Text style={styles.desc}>{tip.desc}</Text>                 <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>             </View>                      </ScrollView>          ) }

 

4. 페이지 공유 (Share) 기능

 

- App.js 에 기본 제공기능인 공유기능 불러오기

import { Share } from "react-native";

 

- 필요한 페이지에 공유기능 추가하기

 

DetailPage.js 에 있는 공유하기 버튼에 기능 부여

import React,{useState,useEffect} from 'react'; import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native'; export default function DetailPage({navigation,route}) {     const [tip, setTip] = useState({         "idx":9,         "category":"재테크",         "title":"렌탈 서비스 금액 비교해보기",         "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",         "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",         "date":"2020.09.09"     })          useEffect(()=>{         console.log(route)         navigation.setOptions({             title:route.params.title,             headerStyle: {                 backgroundColor: '#000',                 shadowColor: "#000",             },             headerTintColor: "#fff",         })         setTip(route.params)     },[])     const popup = () => {         Alert.alert("팝업!!")     }     const share = () => {         Share.share({             message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,         });     }     return (            <ScrollView style={styles.container}>             <Image style={styles.image} source={{uri:tip.image}}/>             <View style={styles.textContainer}>                 <Text style={styles.title}>{tip.title}</Text>                 <Text style={styles.desc}>{tip.desc}</Text>                 <View style={styles.buttonGroup}>                     <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>                     <TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>팁 공유하기</Text></TouchableOpacity>                 </View>                              </View>                      </ScrollView>          ) }

입력하면 공유기능 활성화 됨

 

 

5. 외부 링크 기능

 

페이지에 있는 내용들을 가져온 출처로 연결시켜주는 기능

 

- expo 에 링크 도구 설치하기

expo install expo-linking

- DetailPage.js 에서 출처 표기하기

import * as Linking from 'expo-linking'; 링크 기능 사용하겠단 선언하기 const link = () => {      Linking.openURL("출처 주소") } 링크 주소를 입력하여 연결시켜주기