탭탭카드놀이) 네비게이터 (Navigator)

개발 현황은 깃헙을 통해 확인 가능합니다

https://github.com/coqoa/tabtabcard

GitHub - coqoa/tabtabcard

공부하면서 문제 해결하거나 기능 구현한 것들 위주로 작성하는 글입니다

---

로직 구상을 하고 내비게이터의 역할을 하는 파일들을 먼저 생성한 뒤 스크린들을 생성하도록 한다

App.js

//App.js

import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';
import Stack from './app/navigators/Stack';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaView } from 'react-native-safe-area-context';


export default function App() {
  const [ready, setReady] = useState(false);
  const onFinish = () => setReady(true);
  const startLoading = async () =>{
    // 로딩하고 싶은 것들을 담는 공간 
    // (ex. API호출 혹은 정보를 받거나 video요소를 미리 받아놓거나, DB를 미리 열거나, 아이콘을 미리준비)
  };
  if(!ready){
    return (
    <AppLoading
      startAsync={startLoading}
      onFinish={onFinish}
      onError={console.log} />
      // ready가 안되어있으면 AppLoading은 splash screen을 비추도록 강제하고 startAsync를 호출,
      // startAsync가 완료되면 AppLoading은 onFinish함수를 호출, 
      // onFinish는 state를 변경시키고 state가 변경되면 조건문 else에 해당하는 부분을 render한다
    );
  }
  return (
    <NavigationContainer>
      <SafeAreaView style={{flex:1}}>
        <Stack />
      </SafeAreaView>
    </NavigationContainer>
  )
}

내비게이터를 담기 위해 NavigationContainer로 감싸고,

여러 가지 모바일에 동일한 화면을 만들기 위해 SafeAreaView로 감싼 뒤 StackNavigator를 import 한다

---

Stack.js

import React from "react";
import {createNativeStackNavigator} from "@react-navigation/native-stack" 
import Login from "../screens/Login";
import Signup from "../screens/Signup";
import MenuStack from "./MenuStack";

const NativeStack = createNativeStackNavigator();


const Stack = () => {
    return(
    <NativeStack.Navigator initialRouteName="Login" screenOptions={{headerShown: false}} >
        <NativeStack.Screen name="Login" component={Login} />
        <NativeStack.Screen name="Signup" component={Signup} />
        <NativeStack.Screen name="MenuStack" component={MenuStack} />
    </NativeStack.Navigator>
    );
}
export default Stack;

StackNavigator를 import 하고, Screen과 Navigator들을 Navigator로 감싸준다

여기에서 사용하는 스크린은 Login, Signup, 내비게이터는 MenuStack이다

---

MenuStack.js

import React from "react";
import {createNativeStackNavigator} from "@react-navigation/native-stack" 
import Menu from "../screens/Menu";
import WordPlay from "../screens/WordPlay";

const NativeStack = createNativeStackNavigator();

const MenuStack = () => {
    return(
    <NativeStack.Navigator initialRouteName="Menu" screenOptions={{headerShown: false}} >
        <NativeStack.Screen name="Menu" component={Menu} />
        <NativeStack.Screen name="WordPlay" component={WordPlay} />
    </NativeStack.Navigator>
    );
}
export default MenuStack;

위와 마찬가지로 StackNavigator를 import 하고 Screen들을 Navigator로 감싸준다

여기서 사용하는 실제 콘텐츠에 해당하는 Menu, WordPlay, MathPlay가 될 것이고 현재 WordPlay를 개발 중이다

Menu는 WordPlay와 MathPlay를 탭 해서 스크린을 변경시키기 위한 경유지 역할을 한다

Menu.js