React Native - 기본 Layout, API

React Native

 

 

✅ 기본 Component

---

View

Container 역할(div 같은 느낌)

style 속성도 있고 웹과 거의 비슷하게 사용 가능하나 사용할 수 없는 스타일이 몇몇 존재한다.

 

Text

React Native에 있는 모든 text들은 Text component 안에 들어가야 한다.

 

ActivityIndicator

로딩 표시

<ActivityIndicator size="large" color="black" />

 

TouchableOpacity

누르는 이벤트를 listen할 준비가 된 View

누르면 투명도 변경 애니메이션이 적용됨

onPress 속성에 콜백 함수를 줘서 눌렸을 때 동작도 지정 가능

hitSlop: 터치 가능 영역 설정

 

TouchableHighlight

눌렀을 때 요소의 배경색이 바뀌게 해줌(underlayColor)

onPress 속성에 콜백 함수를 줘서 눌렸을 때 동작도 지정 가능

 

TouchableWithoutFeedback

아무 효과 없는 Touchable component

 

Pressable

Touchable 후속 느낌

더 많은 설정 가능

hitSlop: 터치 가능 영역 설정

 

TextInput

React Native에서 유저가 text를 적을 수 있는 유일한 방법

keyboardType: 키보드 타입 설정

returnKeyType: 엔터의 텍스트 종류 설정

multiline: 여러 줄로 입력값 표시

secureTextEntry: 입력값 숨기기

placeholderTextColor: placeholder 색상 지정

submitBehavior: "blurAndSubmit"(enter시 키보드 닫고 제출) | "newline"(enter시 줄바꿈) | "submit"(enter시 키보드 유지하고 제출)

 

StyleSheet.create()

style object들을 담는 object

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 48,
  },
});

 

StyleSheet.create 사용 이유(필수는 아님, inline style로도 사용 가능):

1. 자동 완성 기능 제공

2. 스타일 컴포넌트를 정리하는데 유용

 

✅ Expo SDK

---

React Native에서는 필수 Component, API만 제공한다.

나머지 필요한 패키지들은 Expo SDK에서 가져와 사용해야 한다.

 

AsyncStorage

npx expo install @react-native-async-storage/async-storage

 

string만 저장 가능하고 브라우저의 localStorage처럼 작동한다.(async await를 사용한다는 점만 다름)

 

✅ Layout

---

React Native에는 display: block, inline-block, grid 같은 항목이 없다.

Flex box만 사용한다.

 

View

1. View는 기본적으로 Flex Box다.

2. Flex Direction의 기본값은 column이다.(웹에서는 기본값이 row)

3. 브라우저가 아니기 때문에 overflow가 있다고 해서 스크롤 할 수는 없다.

4. 레이아웃을 디자인 할 때 99.8% width와 height를 사용하지 않는다.(0.2%는 아이콘이나 아바타?)

비율로 사용한다.

    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }}></View>
      <View style={{ flex: 1, backgroundColor: "teal" }}></View>
      <View style={{ flex: 1, backgroundColor: "orange" }}></View>
    </View>

 

ScrollView

1. 스크롤 할 수 있게 해준다.

2. ScrollView를 사용할 때 style을 지정하고 싶으면 style prop이 아니라 contentContainerStyle을 사용해야 한다.

3. 가로 스크롤을 구현할 때 flex를 줄 필요가 없다.(overflow가 발생해야 하기 때문)

4. pagingEnabled 속성으로 스크롤에 탄력(sticky)을 줄 수 있다.(어느정도 영역을 넘어가야만 스크롤이 됨)

5. showsHorizontalScrollIndicator 속성으로 indicator의 표시 유무를 설정할 수 있다.(boolean)

6. indicatorStyle 속성으로 indicator의 색깔을 바꿀 수 있다.(ios만 적용 가능)

Dimensions

1. 사용자의 화면 크기를 얻을 수 있다.

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

 

 

✅ Location API

---

npx expo install expo-location

 

requestForegroundPermissionsAsync

위치 권한 요청하기

  const ask = async () => {
    const permission = await Location.requestForegroundPermissionsAsync();
    console.log(permission);
  };
  useEffect(() => {
    ask();
  }, []);

 

getCurrentPositionAsync

유저 위치 정보 얻기

const location = await Location.getCurrentPositionAsync({ accuracy: 5 });

 

reverseGeocodeAsync(location)

좌표(latitude, longitude)를 사람이 읽을 수 있는 주소 정보로 바꿔주는 함수

    const location = await Location.reverseGeocodeAsync({
      latitude,
      longitude,
    });

 

 

✅ Platform API

---

현재 어느 플랫폼에서 동작 중인지 알 수 있는 API