[Expo/RN] 기본 Api와 라이브러리 설명 (업데이트 중)

목차

Expo Api 정리 (React Native)

 React Native 입문 단계에서 적용해본 API를 정리하는 글.

주의 : 간단하게 작성된 문서이므로 생략된 내용이 많음.

Expo란?

• Expo는 React Native개발을 쉽게 만들어주는 개발 도구
• 별도의 Xcode나 Android Studio가 없어도 개발 가능
• Expo SDK를 제공해주어 카메라, 위치, 알림 등의 다양한 기능을 제공

복잡한 빌드 배포를 생략하고 쉽고 간편하게 앱개발을 할 수 있게 하는 도구

Expo 설치

초기 환경 세팅

1. node 설치
2. Expo-cli 설치
3. homebrew 설치(mac)
4. +watchman 설치(수정된 코드를 자동으로 적용해주는 Fast Refresh 도구)
5. 휴대폰 앱 'Expo Go' 설치(안드로이드는 'Expo')

React Native 라이브러리

ScrollView 

: view들을 자식으로써 담을 수 있는 스크롤을 사용할 때 쓰는 컴포넌트

https://reactnative.dev/docs/scrollview

ScrollView · React Native

<ScrollView
        pagingEnabled
        horizontal
        contentContainerStyle={styles.weather}
        showsHorizontalScrollIndicator={false}
>
	<View>
    	<Text style={styles.description}>text</Text>
        <Text style={styles.tinyText}>text2</Text>
    </View>
    <View>
    	<Text style={styles.description}>text</Text>
        <Text style={styles.tinyText}>text2</Text>
    </View>
</ScrollView>

속성

• pagingEnabled: 스크롤 시 View 크기만큼 움직임 (default: false)
• horizontal: 가로방향 스크롤 (default: false)
• contentContainerStyle: view와 다르게 ScrollView에 styleSheet적용 시 해당 props 사용
• showsHorizontalScrollIndicator: 하단 스크롤바 제공 (default: true)

Dimensions

: 애플리케이션 창의 너비, 높이 가져옴

https://reactnative.dev/docs/dimensions

Dimensions · React Native

const { height, width } = Dimensions.get("window");

ActivityIndicator

: 로딩바

https://reactnative.dev/docs/activityindicator

ActivityIndicator · React Native

<View>
	<ActivityIndicator size="small" color="#0000ff" />
</View>

TouchableOpacity

: 선택했을 때 투명도를 조절

https://reactnative.dev/docs/touchableopacity

TouchableOpacity · React Native

<TouchableOpacity onPress={onPress}>
	<View style={styles.toDoBtn}>
		<Fontisto name="trash" size={15} color="#D9D9E3" />
	</View>
</TouchableOpacity>

Expo API

StatusBar

: 상단 네트워크, 와이파이, 시간, 배터리 등의 상태 표시기 제공

https://docs.expo.dev/versions/latest/sdk/status-bar/

StatusBar

<StatusBar style="dark" /> <!--다크모드 상태표시기-->

Location

: 위치 정보 제공

https://docs.expo.dev/versions/latest/sdk/location/

• requestForegroundPermissionsAsync : 위치 정보 권한설정
• getCurrentPositionAsync : 위도, 경도 받아옴
• reverseGeocodeAsync : 위치 정보(리소스를 많이 소모해 합리적인 사용을 권장)

관련 문서

• https://reactnative.dev/ : React Native 공식사이트
• https://reactnative.directory/ : React Native 커뮤니티 사이트(다른 개발자가 만든 라이브러리)
• https://docs.expo.dev/versions/latest/ : Expo sdk 여기서 보면됨
• https://icons.expo.fyi/ : Expo에서 제공하는 icon resource