React Native

A framework for building native apps using React

• 크로스 브라우징이 가능한 앱 제작이 가능함.
• Javascript 로 작성, App이 build 될 때 네이티브 코드로 변환됨.

Expo?

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

특징

• 교육용으로 적합하며, 실무에서는 거의 사용하지 않음
• 상대적으로 사용 가능한 라이브러리 수가 적다
• 차차 Expo에서도 사용 가능한 라이브러리의 수가 증가되는 추세로, 이후 사용 범위에 영향을 줄 수 있을 것 같다.

Expo 어플을 통해 리액트 네이티브 앱을 내 휴대폰에서 바로바로 확인할 수 있었다.

How to Start

npm install --global expo-cli
expo init my-project (my-project 라는 폴더 생성)
cd my-project
yarn start ( 해당 앱은 expo 앱에서 확인 가능하게 하는 QR코드 생성됨)
vsCode 에서 폴더 열기

Basic

Text

react와는 다르게 리액트 네이티브에서는 글자는 무조건 <Text></Text> 로 감싸있어져야한다.

Image

src 대신에 source, url 대신에 uri 로 작성한다.

<Image style={styles.image}
       source={{ uri: "https://images.unsplash.com/photo-1545494097-1545e22ee878?ixlib=rb-.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60"}} />

View

html의 div와 비슷한 태그. 의미는 없지만 묶는 경우 많이 사용.

Style 작성법

styled-components와 비슷한 방식으로 StyleSheet를 사용해서 작성

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  touchableBtn: {
    height: 48,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  scrollView: {
    width: "100%",
    backgroundColor: "#f8f8f8",
  },
  image: {
    height: 150,
    width: 150,
  },
});

Advanced

TouchableOpacity

클릭하는 경우 Opacity가 변화하는 button 태그로 이해하면 이해가 편하다.
유저가 버튼을 클릭했는지 알 수 있게 해준다.
Button 태그와는 다르게 기본 Style이 없어서 사용하는 경우도 존재한다.

ScrollView

Scroll이 되어야하는 컴포넌트를 제작할 경우 필요하다.
웹과는 다른 점이니 꼭!!! 기억해두기!
bounces : true / false. 스크롤 할 경우 바운스 효과가 있게 할 것인지 혹은 없게 할 것인지 정할 수 있다.

Pressable

다양한 이벤트들을 감지할 수 있는 버튼. 참고는 Pressable React Native 에서 가능!

Navigation

@react-navigation/stack

npm install @react-navigation/native 혹은 yarn add @react-pagination/native로 react-navigation을 설치해준 뒤, expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 로 expo에 라이브러리를 설치해준다.

stack 되는 navigation을 사용해주기 위해서 yarn add @react-navigation/stack 실행.

App.js 혹은 index.js에서 const Stack = createStackNavigator(); 선언해주고 Routes처럼 NavigationContainer로 감싸줘야함.

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "./src/screens/home/Home";
import DetailsScreen from "./src/screens/detail/Detail";

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={"Home"}>
        <Stack.Screen name="Detail" component={DetailsScreen} />
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ title: "OverView" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

페이지 이동시키기 위해서는 button 등에 onPress={() => navigation.navigate("Detail")} 로 작성해준다.