스파르타코딩클럽 앱개발종합반3주차 개발일지 비전공자 코딩공부 리액트 네비게이터 페이지 옮기기

리액트(React.js)로 앱만들기 

페이지 옮길 경우 네이게이션 코드다는법

 

내가 이해한 방법.

 

EX) 상황 Mainpage에서 Aboutpage로 옮기는과정

 

1. StackNavigator.js 네이게이션을 설정할수있는 페이지를  추가로 만든다.

------------------------------------------------------------------------------------------------------------------------

&

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
 
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
import AboutPage from '../pages/AboutPage';
 
 
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
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.Screen name="AboutPage" component={AboutPage}/>
        
        </Stack.Navigator>
    )
}
 
export default StackNavigator;

------------------------------------------------------------------------------------------------------------------------

 

2. Aboutpage에 navigator 코드를 달아준다.

 

 

import React,{useEffect} from 'react'
 
import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native'
 
import { StatusBar } from 'expo-status-bar';
 
 
 
export default function AboutPage({navigation,route}){
 
    const aboutImage = "
 
    
 
    useEffect(()=>{
 
        navigation.setOptions({
 
            title:"소개 페이지",

 

------------------------------------------------------------------------------------------------------------------------

 

3. Mainpage에도 버튼누르면 옮기는  navigator코드 추가

 

 

import React,{useState,useEffect} from 'react';
import main from '../assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
import { StatusBar } from 'expo-status-bar';
 
export default function MainPage({navigation,route}) {
  console.disableYellowBox = true;
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
 
  useEffect(()=>{
       
    //뒤의 1000 숫자는 1초를 뜻함
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        //헤더의 타이틀 변경
        navigation.setOptions({
            title:'나만의 꿀팁'
        })
        //꿀팁 데이터로 모두 초기화 준비
        let tip = data.tip;
        setState(tip)
        setCateState(tip)
     
    
  },[])
 
    const category = (cate) => {
        if(cate == "전체보기"){
            //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
            setCateState(state)
        }else{
            setCateState(state.filter((d)=>{
                return d.category == cate
            }))
        }
    }
 
   
  return ready ? <Loading/> :  (
  
    <ScrollView style={styles.container}>
        <StatusBar style="black" />
        {/* <Text style={styles.title}>나만의 꿀팁</Text> */}
       
        <TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('AboutPage')}}>
          <Text style={styles.aboutButtonText}>소개 페이지</Text>
        </TouchableOpacity>
        <Image style={styles.mainImage} source={main}/>
       
        <View style={styles.cardContainer}>
            {/* 하나의 카드 영역을 나타내는 View */}
            {
            cateState.map((content,i)=>{
                return (<Card content={content} key={i} navigation={navigation}/>)
            })
            }
            
        </View>
    </ScrollView>
  );
}
 
const styles = StyleSheet.create({
  container: {

 

 

----------------------------------------------------------------------------------------

 

리액티브 네비게이션 공식문서사이트

https://reactnavigation.org/docs/getting-started/

 

https://reactnavigation.org/docs/getting-started/