React Native: 반응형 및 적응형 사용자 인터페이스
일반 팁:
차원 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이 도움이 됩니다.
단계:
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;
}
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,
},
그렇게
...
// 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는 코드를 구성하고 플랫폼별로 구분하는 두 가지 방법을 제공합니다.
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
권장되지는 않지만 노치, 장치 사이드바 등에 의해 앱 콘텐츠가 겹치지 않도록 보호하는 데 사용됩니다.
Reference
이 문제에 관하여(React Native: 반응형 및 적응형 사용자 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/holdmypotion/react-native-responsive-and-adaptive-user-interfaces-3c6d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(React Native: 반응형 및 적응형 사용자 인터페이스), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/holdmypotion/react-native-responsive-and-adaptive-user-interfaces-3c6d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)