적응성은 아마도 앱의 가장 필수적인 요구 사항일 것입니다. 다른 OS, 방향, 사용 가능한 너비 및 높이 등에 반응하는 앱을 만들려고 하는 동안 사용하는 일부 도구와 팁을 배치하려고 합니다.

일반 팁:

항상 최소 및 최대 너비를 설정하면 XS 또는 XL 화면이 있는 장치를 덮는 데 도움이 됩니다.

장치 화면에서 사용 가능한 픽셀을 기반으로 너비 또는 높이를 설정하려면 반응 네이티브에서 제공하는 Dimension API를 사용하십시오. 이것은 백분율을 부모 보기에 대한 백분율로 사용하는 것과 다르며 이는 화면 자체에 해당합니다.

모든 플랫폼에서 키보드를 열 때 KeyboardAvoidingView를 사용하여 입력을 오프셋합니다.

차원 API

미디어 쿼리로 사용

Dimensions API 작업은 CSS의 미디어 쿼리와 유사하게 작동하도록 만들 수 있습니다. 기본적으로 화면의 너비와 높이를 얻은 다음 다양한 크기에 대한 스타일을 변경합니다. 적응성은 아마도 앱의 가장 필수적인 요구 사항일 것입니다. 다른 OS, 방향, 사용 가능한 너비 및 높이 등에 반응하는 앱을 만들려고 하는 동안 사용하는 일부 도구와 팁을 배치하려고 합니다.

Dimensions 개체는 JS 파일에 있는 모든 개체를 사용할 수 있습니다.

let containerStyles = styles.container;
let buttonStyles = styles.button;
let navStyles = styles.nav;

// Just like "@media screen and (max-width: 350px)"
if (Dimensions.get('window').width < 350) {
    containerStyles = styles.containerSmall;
    buttonStyles = styles.buttonSmall;
    navStyles = styles.navSmall;
}

스타일링에 직접 사용

"Dimensions.get('window').width"는 숫자 값을 제공하므로 이를 사용하여 다음과 같은 레이아웃 스타일을 설정할 수 있습니다.

imageContainer: {
    width: Dimensions.get("window").width * 0.7,
    height: Dimensions.get("window").width * 0.7,
    borderRadius: (Dimensions.get("window").width * 0.7) / 2,
    borderWidth: 3,
    borderColor: "black",
    overflow: "hidden",
    marginVertical: 30,
  },

방향 변경에 사용

치수는 앱이 처음 렌더링될 때 계산됩니다. 따라서 장치의 방향을 변경하면 자체적으로 다시 계산되지 않습니다.

이런 경우 react에서 제공하는 useEffect hook이 도움이 됩니다.

단계:

useEffect 후크 내에서 Dimensions API를 사용하여 특정 스타일을 설정하는 함수를 만듭니다.

"change"이벤트에 대한 Dimensions 개체에 이벤트 리스너를 추가하고 이전에 정의된 함수를 두 번째 인수로 전달합니다.

그렇게

...
// Sets the width initially!
const [buttonWidth, setButtonWidth] = useState(
    Dimensions.get("window").width / 4
  );

  useEffect(() => {
        // Sets the widht again if the widht changes,
        // i.e, from potrait to landscape or vice versa
    const updateLayout = () => {
      setButtonWidth(Dimensions.get("window").width / 4);
    };
    Dimensions.addEventListener("change", updateLayout);

    return () => {
      Dimensions.removeEventListener("change", updateLayout);
    };
  }, []);

return (
    ...
    <View style={{ width: buttonWidth }}>
    <Button
      title="whatever"
    />
  </View>
...
)

...

추가 정보: https://reactnative.dev/docs/dimensions

화면 방향 API

이 API는 엑스포에서 제공합니다. 이 API의 주요 목표는 화면 방향에 대한 정보를 제공하고 이에 대해 작업을 수행할 수 있도록 하는 것입니다.

방향을 가져오고 잠그고 방향 변경에 이벤트 리스너를 추가하는 많은 방법을 얻을 수 있습니다.
방법에 대한 추가 정보: https://docs.expo.io/versions/latest/sdk/screen-orientation/

OS별 스타일링

React Native는 코드를 구성하고 플랫폼별로 구분하는 두 가지 방법을 제공합니다.

플랫폼 모듈 사용.

플랫폼별 파일 확장자를 사용합니다.

플랫폼 모듈

앱이 실행 중인 플랫폼(IOS, Android, 웹 등)을 확인할 수 있습니다.
플랫폼 유형에 따라 다른 스타일을 설정하는 것이 매우 유용합니다. 구성 요소의 작은 부분만 플랫폼에 따라 다를 때 이 옵션을 사용합니다.

여기서 Platform.select()는 현재 실행 중인 플랫폼에 가장 적합한 값을 반환합니다.
즉, IOS 장치를 사용하는 경우 "ios"키가 우선 적용됩니다!!

import React from "react";
import { View, StyleSheet, Text, Platform } from "react-native";

const Header = (props) => {
  return (
    <View
      style={{
        ...styles.header,
        ...Platform.select({
          ios: styles.headerIOS,
          android: styles.headerAndroid,
        }),
      }}
    >
      <Text>{props.title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    width: "100%",
    height: 90,
    paddingTop: 36,
    backgroundColor: "#CCA7B1",
    alignItems: "center",
    justifyContent: "center",
  },
  headerIos: {
    backgroundColor: "white",
    borderBottomColor: "#ccc",
    borderBottomWidth: 1,
  },
  headerAndroid: {
    backgroundColor: "#CCA7B1",
  },
});

export default Header;

추가 정보: https://reactnative.dev/docs/platform-specific-code#platform-module

별도의 파일 사용

플랫폼별 코드가 많은 경우 이를 수행하는 깔끔한 방법은 코드를 여러 파일로 분할하는 것입니다.

그렇게

MainButton.android.js
MainButton.ios.js

그런 다음 아래와 같이 구성 요소를 사용할 수 있으며 반응 네이티브는 앱이 실행되는 플랫폼에 따라 파일을 자동으로 선택합니다.

import MainButton from "./components/MainButton"

슈퍼 쿨하지 않습니다!!

추가 정보: https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions

SafeAreaView

권장되지는 않지만 노치, 장치 사이드바 등에 의해 앱 콘텐츠가 겹치지 않도록 보호하는 데 사용됩니다.