[RN] Navigation 사용하기

// install 할 내용들

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

yarn add @react-navigation/stack

// App.js

import React from 'react';

// 1. NavigationContainer import 해주고
import { NavigationContainer } from '@react-navigation/native';
import { StatusBar } from 'expo-status-bar';

// 2. Navigator로 화면 그려준 view를 import 한다
import StackNavigator from './Navigations/StackNavigator'


export default function App() {

  console.disableYellowBox = true;

  return (
  // 3. 일단 감싸주자
    <NavigationContainer>
      <StatusBar style="black" />
      // 4. Navigator 올려주자
      <StackNavigator />
    </NavigationContainer>);
}

// StackNavigator

import React from 'react';

// 1. Navigator import 한다
import { createStackNavigator } from '@react-navigation/stack';

// 2. Navigation 안에서 사용할 Views import 한다
import DetailPage from '../Pages/DetailPage';
import MainPage from '../Pages/MainPage';

// 3. Navigator로 사용할 객체 선언한다
const Stack = createStackNavigator();

const StackNavigator = () => {
    return (
    
	// 4. 객체 안에 .Navigator 라는 property 나옴
     <Stack.Navigator
		     // 5. Header 에 대한 내용 정의 하면 된다
            screenOptions={{
                headerStyle: {
                    backgroundColor: "white",
                    borderBottomColor: "white",
                    shadowColor: "white",
                    height: 100
                },
                //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
                headerTitleAlign: 'left',
                headerTintColor: "#000",
                headerBackTitleVisible: false
            }}

        >

			// 6. 객체 안에 .Screen 있는데 사용할 Screen들 일단 넣어주자
            <Stack.Screen name="MainPage" component={MainPage} />
            <Stack.Screen name="DetailPage" component={DetailPage} />
        </Stack.Navigator>

    )
}

export default StackNavigator;

// MainPage.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView } from 'react-native';

export default function MainPage({ navigation, route }) {
	const [state, setState] = useState([])
	const [cateState, setCateState] = useState([])

    const [ready, setReady] = useState(true)

	// 1. View 그릴때 호출 되는 함수이다 
    useEffect(() => {
    
    	// 2. Navigation Title 값 할당
        navigation.setOptions({
            title: '나만의 꿀팁'
        })

        setTimeout(() => {
            setState(data.tip)
            setCateState(data.tip)
            setReady(false)
        }, 1000)
    }, [])
    
    return ready ? <Loading /> : (
        <View style={styles.cardContainer}>
            {
	            // cateState 안에 담긴 상태 변수들 반복문 돌리면서 Card init 한다
                // 3. Card 그릴때 content, key, navigation 같이 넘겨 준다
                cateState.map((content, i) => {
                    return (<Card content={content} key={i} navigation={navigation} />)
                })
            }
        </View>
    
	)
}

// Card.js

import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native'

// 1. MainPage이 한테 content, navigation 상속받는다
export default function Card({ content, navigation }) {
  return (

    // 2. Card가 onClick되면 navigation.navigate('DetailPage') 로 이동시킨다
    // 이동 시킬때 매개변수로 content도 같이 넘겨준다 안에는 DetailPage에 뿌려질 내용들이 담겨있다.
	<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',content)}}>
        <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>
  )
}

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert } from 'react-native';

// 1. DetailPage init 될때 route를 같이 받는다 
// 이유는 StackNavigator.js 에서 Stack.Screen에 DetailPage가 들어갔는데
// 그렇게 함으로써 이미 route에 들어가 있는 페이지이기 때문이다.

export default function DetailPage({navigation,route}) {
	
    // 2. 사용할 useState를 init 한다
    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(()=>{
        navigation.setOptions({
			// 3. route안에 params 안에 title이 들어있는데
            // 이건 content 의 title 이다
            // 이걸 navBarTitle에 넣어준다
            title:route.params.title,

            headerStyle: {
                backgroundColor: '#000',
                shadowColor: "#000",
            },
            headerTintColor: "#fff",
        })
        
        // 4. 페이지에 보여줄 내용들을 담는 상태 변수에 상위 view에서 받아온
        // data를 넣어준다
        setTip(route.params)
    },[])
    
    return ( 
        
        // 5. 상태 변수에 들어간 정보들을 화면에 뿌려준다
        <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>
    
    )
}