REACT NATIVE SETUP

🍔 핵심 내용

 

🥑 기본 RN을 셋업하자.

 

npm install --global expo-cli

expo init 프로젝트명 입력

expo install expo-font

expo install expo-app-loading

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

npm install styled-components

설치 진행

 

 

🍔 코드 리뷰

 

🥑 App.js

import AppLoading from "expo-app-loading";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import * as Font from "expo-font";
import { Asset } from "expo-asset";
import LoggedOutNav from "./navigators/LoggedOutNav";
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  const [loading, setLoading] = useState(true);
  const onFinish = () => setLoading(false);
  const preload = () => {
    const fontsToLoad = [Ionicons.font];
    const fontPromises = fontsToLoad.map((font) => Font.loadAsync(font));
    const imagesToLoad = [
      require("./assets/logo.png"),
      "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/840px-Instagram_logo.svg.png",
    ];
    const imagePromises = imagesToLoad.map((image) => Asset.loadAsync(image));
    return Promise.all([...fontPromises, ...imagePromises]);
  };
  if (loading) {
    return (
      <AppLoading
        startAsync={preload}
        onError={console.warn}
        onFinish={onFinish}
      />
    );
  }
  return (
    <NavigationContainer>
      <LoggedOutNav />
    </NavigationContainer>
  );
}

주요 개념

1.  App이 로딩 될때, preloading으로 받아올 데이터들을 미리 다 다운받아 놓는다. (폰트, 이미지, 등)

2. App 로딩이 끝나면 onFinish로 loading을 false로 바꿔주고 return 값을 보내준다.

3. return 값에는 네비게이터가 들어가는데, 이때 컨테이너는 반드시 감싸주어야 한다. (rule 임)

 

 

🥑 navigators/LoggedOutNav.js

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Welcome from "../screens/Welcome";
import LogIn from "../screens/LogIn";
import CreateAccount from "../screens/CreateAccount";

const Stack = createStackNavigator();

export default function LoggedOutNav() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Welcome" component={Welcome} />
      <Stack.Screen name="Login" component={LogIn} />
      <Stack.Screen name="CreateAccount" component={CreateAccount} />
    </Stack.Navigator>
  );
}

네비게이터 역할을 맡고 있는 파일이다. 해당 네비게이터에서 여러 스크린으로 화면이 뿌려진다. Stack 개념은 화면위에 화면이 쌓이는 개념.

 

🥑 screens/Welcome.js

import React from "react";
import { Text, View } from "react-native";

export default function Welcome() {
  return (
    <View>
      <Text>반갑습니다.</Text>
    </View>
  );
}

 

🥑 screens/LogIn.js

import React from "react";
import { Text, View } from "react-native";

export default function Login() {
  return (
    <View>
      <Text>Login</Text>
    </View>
  );
}

 

🥑 screens/CreateAccount.js

import React from "react";
import { Text, View } from "react-native";

export default function CreateAccount() {
  return (
    <View>
      <Text>CreateAccount</Text>
    </View>
  );
}