리액트 네이티브
npm start , npm run iOS 를 따로따로 터미널에서 해줄 때 npm start 를 하고 npm run iOS 를 해야 하는 이유는 나중에 어플리케이션을 re - build 할때 npm start 부분에서 r 만 눌러줘도 re - build 가 되기 때문이다.
splash-screen
스플래시 화면
모바일 앱이나 웹 애플리케이션이 시작될 때 앱이 로딩되는 동안 사용자에게 보여지는 화면입니다. 주로 앱의 로고, 애플리케이션 이름, 혹은 로딩 상태를 나타내는 간단한 그래픽과 함께 나타납니다.
expo install expo-splash-screen
import * as SplashScreen from 'expo-splash-screen';SplashScreen.preventAutoHideAsync();이 기능은 스플래시 화면이 자동으로 사라지는 것을 막는 기능입니다.
스플래시 화면이 자동으로 사라지는 경우는 어떤 것이 있을까요??
-
시간 초과
대부분의 앱 플랫폼에서는 스플래시 화면을 일정 시간이 지난 후 자동으로 숨기는 기능을 내장하고 있습니다.
이는 앱이 시작될 때 일정 시간이 지나면 자동으로 메인 화면으로 전환되도록 만들어주는 것입니다. -
사용자 상호 작용
사용자가 스플래시 화면을 터치하거나 다른 상호 작용을 시작할 때, 일부 앱은 이를 감지하고 스플래시 화면을 숨기고 메인 화면으로 전환합니다.
사용자 상호 작용은 앱의 로딩이 완료되었을 때 예상치 못한 동작을 일으키는 경우도 있습니다.
await SplashScreen.hideAsync();이 함수는 스플래시 화면을 숨기는 역할을 합니다.
<View onLayout={onLayoutRootView}></View>이렇게 설정을 해 주어야 splash-screen 기능을 사용할 수 있습니다.
expo-font, expo-asset
expo-font
Expo SDK에 포함된 패키지로, 앱에서 사용할 폰트를 로드하고 관리하는 데 사용됩니다.
Expo의 Font.loadAsync() 함수를 사용하여 비동기적으로 폰트를 로드하고 캐시합니다.
expo-asset
Expo 애플리케이션에서 이미지, 비디오, 사운드 등의 다양한 미디어 자산을 관리하는 데 사용됩니다.
Asset.loadAsync() 함수를 사용하여 비동기적으로 자산을 로드하고 캐시할 수 있습니다.
import React, { useCallback, useEffect, useState } from 'react';
import { Ionicons } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Asset } from 'expo-asset';
import { Text, View, Image } from 'react-native';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [ready, setReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
await Font.loadAsync(Ionicons.font);
await Asset.loadAsync(require('./loginImage.webp'));
} catch (error) {
console.warn(error);
} finally {
setReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (ready) await SplashScreen.hideAsync();
}, [ready]);
if (!ready) {
return null;
}
return (
<View onLayout={onLayoutRootView}>
<Text>We are done Loading !</Text>
</View>
);
}useAssets, Font.useFonts
useAssets
Expo 앱에서 이미지, 비디오, 사운드 등의 미디어 자산을 로드하는 데 사용됩니다.
이 훅은 우리가 앱에서 사용할 자산들을 미리 로드하고, 로드된 자산들을 사용할 수 있도록 도와줍니다.
예를 들어, 게임에서 사용할 이미지나 사운드를 미리 로드해두면 게임이 더 부드럽게 실행될 수 있습니다.
Font.useFonts
Expo 앱에서 사용할 폰트를 로드하는 데 사용됩니다.
이 훅을 사용하면 앱에서 사용할 텍스트의 폰트를 미리 로드할 수 있습니다.
예를 들어, 앱의 제목이나 버튼 텍스트의 폰트를 미리 로드해두면 앱이 더 빨리 로드되고 사용자가 더 나은 시각적 경험을 할 수 있습니다.
import React, { useCallback, useEffect, useState } from 'react';
import { Ionicons } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { useAssets } from 'expo-asset';
import { Text, View, Image } from 'react-native';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [assets] = useAssets([require('./loginImage.webp')]);
const [loaded] = Font.useFonts(Ionicons.font)
const onLayoutRootView = useCallback(async () => {
if (assets && loaded) await SplashScreen.hideAsync();
}, [assets, loaded]);
if (!assets || !loaded) {
return null;
}
return (
<View onLayout={onLayoutRootView}>
<Text>We are done Loading !</Text>
</View>
);
}이 코드를 쓸 때에는 단지 font, image 파일을 미리 로드하고 싶을때 사용하지만
만약에 DB 를 미리 가져온다던가, 사용자의 정보를 어디에 저장하는 작업을 사전에 하고 싶다면 위에 나온 hook 들을 사용하지 않고 따로 작업을 해주어야 합니다.
React navigation
React navigation 은 react 에서 navigation 을 사용할 수 있게 해주는 패키지 입니다.
이 패키지를 이용하면 새 screen 이 이전 screen 위에 올라가는 기능인 Stack navigater , 하단에 tap 처럼 메뉴바가 나오는 tap navigater 를 만들 수 있습니다.
설치 방법
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npx pod-install ios (macOS 환경에서 ios 를 개발하고 있다면 설치)이 상태에서 더 추가해야 하는 코드들도 있지만 react-native-app 으로 설치한 폴더라면
자동으로 설정되어 있기 때문에 신경쓰지 않아도 됩니다.
bottom-tabs
하단 tap navigater 를 만드는 방법을 설명하겠습니다.
설치
npm install @react-navigation/bottom-tabs//Tabs.js
import React from 'react';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Movie from '../screens/Movie';
import Tv from '../screens/Tv';
import Search from '../screens/Search';
const Tab = createBottomTabNavigator();
const Tabs = () => (
<Tab.Navigator>
<Tab.Screen name='Movies' component={Movie} />
<Tab.Screen name='Tv' component={Tv} />
<Tab.Screen name='Search' component={Search} />
</Tab.Navigator>
)
export default Tabs
// Movie.js, Search.js, Tv.js
import React from 'react';
import { View, Text } from 'react-native';
const Movie = () => (
<View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
<Text>Movie</Text>
</View>
)
export default Movie;
// App.js
import { NavigationContainer } from '@react-navigation/native';
import Tabs from './navigation/Tabs';
// 중간 과정 생략
return (
<NavigationContainer onReady={onLayoutRootView}>
<Tabs/>
</NavigationContainer>
);
다양한 옵션들
Tab.Navigater 에 적용할 옵션중 initialRouteName 이라는 옵션이 있습니다.
이 옵션은 어플리케이션이 새로 실행될 때 어떤 Screen 이 첫 페이지로 로딩되는지를 정해줍니다.
<Tab.Navigator initialRouteName='Movies'>...screenOptions 는 모든 Tab.Screen 에 어떤 css 를 적용하기 위해 사용하는 옵션입니다.
<Tab.Navigator screenOptions={{
tabBarLabelStyle: {
backgroundColor: "red"
}
}}>
// 만약 개별적으로 css 를 적용하고 싶은 경우
<Tab.Screen name='Tv' component={Tv} options={{
tabBarLabelStyle: {
backgroundColor: "orange"
}
}}
/>screenOptions 에서 tabBarLabelPosition 을 "beside-icon" 으로 설정한다면
navigater 의 아이콘과 글자가 세로가 아닌 가로로 정렬이 됩니다.
<Tab.Navigator initialRouteName='Movies' screenOptions={{
tabBarLabelPosition: "beside-icon"
}}>tabBarBadge 옵션은 알림이나 문자가 왔는지 확인할 때 유용합니다.
<Tab.Screen name='Tv' component={Tv} options={{tabBarBadge: 5}} />
또한 해당 navigater 을 선택한 경우, 선택하지 않은 경우, navigater 의 배경색을 바꾸고 싶다면
<Tab.Navigator initialRouteName='Movies' screenOptions={{
tabBarStyle: { backgroundColor: "orange" },
tabBarActiveTintColor: "red", // 활성화
tabBarInactiveTintColor: "black" // 비활성화
}}>useColorScheme
손쉽게 light , dark 라는 변수를 얻을 수 있습니다.
ios 기준으로 Shift + command + a 를 누르시면 console.log 에 dark, light 가 번갈아 가면서 변경됩니다.
import { View, Text, useColorScheme } from 'react-native';
const color = useColorScheme()
console.log(color)
// 활용법
const isDark = useColorScheme() === "dark";
backgroundColor: isDark ? "dark" : "white"