본문 바로가기

Hybrid25

리액트 네이티브] 11. 스타일드 컴포넌트 기본 리액트 네이티브의 CSS는 기존 CSS와 차이가 크다. 단위가 생략된다던지.. 파라메터를 카멜 표기법으로 작성해야한다던지.. 이런 부분때문에 '스타일드 컴포넌트'를 이용해 기존 CSS처럼 사용할 수 있다. 다음 명령어를 통해 스타일드 컴포넌트를 설치한다. npm install styled-components 혹은 yarn add styled-components 이제 스타일드 컴포넌트를 이용하여 스타일을 적용해보자. 다음과 같은 방식으로 사용할 수 있다. const Container = styled.View` flex: 1; background-color: #ffffff; align-items: center; justify-content: center; `; 기존 방식과 비교해보자. const sty.. 2023. 1. 30.
리액트 네이티브] 10. 그림자 여태까지 앱 개발 하면서 쉐도우 기능을 별로 써 본적은 없는거 같지만(...) 그림자는 안드로이드와 iOS 가 다른 방식으로 스타일이 정해진다. iOS : shadowColor : 그림자 색 shadowOffset : 그림자 거리(width와 height를 이용해서 지정) shadowOpacity : 그림자 불투명도 설정 shadowRadius : 그림자 흐림 반경 설정 Android : elevation : 그림자 설정 이렇게 기기마다 설정이 나뉘는 경우에는 react-native에 저장된 모듈 중 Platform을 이용하여 나눌 수 있다. 예시를 보자. - ../src/component/ShadowBox.js import React from "react"; import { StyleSheet, Vie.. 2022. 12. 19.
리액트 네이티브] 9. 정렬 컴포넌트들을 자유롭게 정렬할수도 있다. 기본적으로 컴포넌트는 위에서 아래로 쌓인다. 이 때 flexDirection 속성을 통해 컴포넌트가 쌓이는 방향을 변경할 수 있다. flexDirection은 네 가지 값이 있다. column : 세로 방향(기본) column-reverse : 세로 방향 역순 row : 가로 방향 row-reverse : 가로 방향 역순 - ./component/Flex.js import React from "react"; import { View, Text, StyleSheet } from "react-native"; export const ColumnExample = () => { return ( A B C ); }; const styles = StyleSheet.create(.. 2022. 12. 15.
Metro-bundler 웹이 사라졌다? 리액트 네이티브를 오랜만에 해야할 일이 있어서 expo 버전 업데이트를 하고 나니 예전처럼 yarn start를 했더니 자동적으로 뜨던 웹이 사라졌다. 오잉 (ㅇ0ㅇ ? 하고 찾아보니 https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206 Sunsetting the Web UI for Expo CLI Four years ago we launched a web UI for Expo CLI, and today we are announcing that we plan to sunset it in the next major release of Expo… blog.expo.dev  expo-cli 6.0 버전부터 사라졌다고 한다. 원래부터 터미.. 2022. 12. 14.
반응형

티스토리툴바