React Native: 반응형 및 적응형 사용자 인터페이스

적응성은 아마도 앱의 가장 필수적인 요구 사항일 것입니다. 다른 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



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

    좋은 웹페이지 즐겨찾기