React Native 사용하는 라이브러리

react

 

 

react-native

- Image: 앱 실행 시 이미지 캐싱을 위해 prefetch 메소드를 사용함. 인자는 string으로 이미지 url을 전달해줌. 예시) Image.get("url")

- StatusBar: 컴포넌트. 스마트폰 스크린에서 맨위 통신상태, 배터리 등의 정보를 보여주는 것을 StatusBar라 하는데, prop으로 bar-style을 주어 색을 조절해줄 수 있음. 예시) bar-style="light-content" || "dark-content"

- Dimensions: 함수. Dimensions.get("screen") 으로 기기의 화면 사이즈를 { width, height }를 반환함.

- ActivityIndicator: 컴포넌트. 일반적인 동그라미 로딩 이미지를 보여줌. prop으로 color, size를 줄 수 있음.

 

 

expo

- AppLoading: 컴포넌트. prop으로 startAsync, OnFinish, OnError를 각각 받음.

1) startAsync

startAsync는 prop에 promise를 반환하는 함수를 전달하면 됨. 로딩이 필요한 이미지, 폰트 등을 로딩하는 역할의 함수를 미리 만들어서 startAsync에 전달하자. startAsync는 이름에서도 알 수 있듯이 비동기 처리를 함. 알아서 비동기 처리해주니 전달하는 함수에서 또 async, await으로 기다릴 필요는 없음.

 

2) onFinish

onFinish에 전달한 함수는 startAsync가 끝나면 호출됨. 그래서 보통 useState를 사용해서 loading의 상태를 바꿔주는 정도만 함.

 

3) onError

onError는 에러가 생길 경우만 호출됨.

 

사용 예시)

<AppLoading

startAsync={loadAssets}

onFinish={onFinish}

onError={console.error}

/>

 

 

expo-font

- import * Font from "expo-font"

- react-native 의 Image와 같은 용도로 사용함.

- Font.loadAsync([Ionicons.font])

- 보기와 같이 배열로 넘겨주어야 함.

 

 

@expo/vector-icons

- Ionicons: 컴포넌트. prop으로 name, color, size를 받음.

- expo에서 검색해서 원하는 아이콘의 이름을 찾아서 name으로 넘겨주자

- 좋은예시)

<Ionicons
	name={iconName}
	color={focused ? "white" : "grey"}
	size={26}
    />

 

 

@react-navigation/native

- import { NavigationCotainer } from "react-navigation-/native"

- Stack과 같은 네비게이터를 사용할 때 이 컴포넌트로 감싸줌. 특별히 줄 prop은 없음.

 

 

expo-asset

- Asset: 앱 실행 시 이미지캐싱을 위해 사용. 예시) Asset.fromModule(stringObj).donwloadAsync()
/ Image와 다르게 프로젝트 폴더 안에 Asset에서 이미지를 캐싱할 때 사용함.

 

 

./navitgation/Stack

- import Stack from "./navigation/Stack"

- Stack형 navigator. 일반적으로 생각하는 어플의 형태를 띄게 해줌.

- 필요한 prop은 아래 링크를 타고가서 참고하면서 개발

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

React Navigation

 

 

axios

- fetch를 아주아주 쉽게 해주는 라이브러리. 다른 거 다필요없이 그냥 필요한 url 넘겨주면 알아서 json으로 반환해줌.

- await axios.get("url")

 

 

styled-components

- import styled from "styled-components/native"

- StyleSheet를 쓰지 않으면서 태그를 꾸밀 수 있음

- 사용 예시

const { width, height } = Dimensions.get("screen"); // Dimension은 react-native에서 import한 함수


const Container = styled.View`
  flex: 1;
  background-color: black;
  justify-content: center;
`;

const Header = styled.View`
  width: 100%;
  height: ${height / 3}px;
`;

const Section = styled.View`
  background-color: red;
  height: 100%;
`;

const Text = styled.Text``;

export default () => (
  <Container>
      <Header>
      		<Section>
              <Text>와! 스타일!</Text>
          	</Section>
      </Header>
  </Container>
);

 

 

Swiper

- import Swiper from "react-native-web-swiper"

- 옆으로 페이지 넘기는 것을 구현하게 해줌. 쇼핑몰 앱같은 곳에서 홈화면에 상품 이미지 지나가는 그런 느낌.

- prop으로 controlEnabled={true | false} loop timeout={3} 이렇게 세가지를 줄 수 있음

1) controlEnabled

기본으로는 next, previous 버튼과 몇번째 페이지인지 뜨는데, prop값을 false로 주면 이것을 가릴 수 있음

2) loop

계속 반복되게 해줌

3) timeout

몇초에 한번씩 자동으로 스와이프 되는지를 결정해줌.

밀리세컨드가 아니라 세컨드로 값을 줌. 3으로 값을 줄 경우 3초에 한번씩 자동으로 슬라이드 넘어감.

 

- 기존 "react-native-swiper"는 웹에서 호환이 안됐는데, 이거는 웹까지 호환이 된다.