코딩가딩가딩

리액트 네이티브에서는 StyleSheet를 이용하여 배치, 폰트 크기, 마진 등 다양한 스타일을 적용할 수 있다. 간단한 예시를 적어보고, 나중에 여유가 생기면 StyleSheet의 요소들을 정리해보도록 하자. const App = () => { return ( 안녕하세요 ); }; export default App; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, }, }); 위의 코드처럼 const styles = StyleSheet.create({});로 스타일을 지정하고, 적용하고 싶은 곳에 style={styles..

ReactNative에서 와 는 어떤 역할을 하는지 정리해보자. 1) 는 같은 것으로 '무언가를 보여주는' 역할을 한다. 2) 는 같은 것으로 '텍스트를 보여주는' 역할을 한다. const App = () => { return ( 안녕하세요 ); }; export default App; 위와 같은 구조로 사용할 수 있고, stylesheet를 이용하여 스타일을 지정할 수도 있다.

크기를 조정할 때 숫자로 크기를 주면 기기의 크기, 비율에 따라 보이는 모습이 달라진다. 이때 flex를 이용하면 비율로 설정이 되기 때문에 기기의 크기에 맞춰 자연스럽게 구성된다. import { StatusBar } from 'expo-status-bar'; import { StyleSheet, View } from 'react-native'; import React from 'react'; export default function App() { return ( ); } const styles = StyleSheet.create({ YellowView: { flex: 1, backgroundColor: 'yellow' }, BlueView: { flex: 1, backgroundColor: 'blu..

* Node.js와 npm 이용 ●expo로 프로젝트 시작하기 1) 명령 프롬프트를 띄운다. 2) cd 폴더명 (프로젝트를 생성할 폴더로 이동한다.) 3) expo init 프로젝트명 (영어로) 4) blank 선택 5) 프로젝트 생성되는 동안 github에 repository 생성 (README 선택) 6) cd 폴더명 (프로젝트가 생성된 폴더로 이동. 폴더명을 따로 입력하지 않았다면 프로젝트명과 동일 7) code . (코드가 열림) 8) git remote add origin github_repo주소 (터미널에) 9) git pull origin master --allow-unrelated-histories (에러 나면 master를 main으로 바꿔서 해보기) 코드를 다 작성하고 expo에서 앱 ..