React22 리액트 네이티브] 12. SafeAreaView와 StatusBar 앱을 만들 때, 화면 전체의 뷰를 일반 뷰로 만들면 생기는 문제가 있다. (테마 뷰와 루트 뷰 코드) 더보기 - App.js import App from "./src/App"; export default App; - ../src/theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#61161', }; - ../src/App.js import React from "react"; import styled, { ThemeProvider } from "styled-components/native"; import { theme } from "./t.. 2023. 1. 31. 리액트 네이티브] 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. 이전 1 2 3 4 5 6 다음 반응형
