react native앱 영화 UI그리기 (+ react native 네비게이터 제작) 네비게이터는 navigation이란 폴더를 만들어 root.jsx안에 bottom Taps navigater와 native Stack Navigater를 합쳤다. https://reactnavigation.org/docs/native-stack-navigator (NativeStack) https://reactnavigation.org/docs/bottom-tab-navigator (Bottom Tabs) 이 두개를 사용했는데 사용하기 전에 먼저 https://reactnavigation.org/docs/getting-started (아래 설치의 링크) npm install @react-navigation/native..
react native todo 수정,삭제 삭제 alert로 취소,삭제 버튼을 준 후 삭제를 누르면 실행 alert문법은 Alert.alert("제목", "내용", [{ text:"버튼1", style: "3가지" }, { text:"버튼2", style: "3가지" }]); 아래 코드에서 onPress로 todo.id를 매개변수로 준다. 매개변수를 id로 받아서 filter를 이용해 todos안의 todo.id와 같지 않은 것만 출력 const deleteTodo = (id) => { //alert쓰는 방식 제목,내용을 쓰고 버튼은 배열안에 객체를 넣어서 씀 style로 세가지 모양가능 Alert.alert("Todo 삭제", "정말 삭제하시겠습니까?", [ { text: "취소", style: "ca..
react native styledText에 스타일 컴포넌트로 touchableopacity속성을 주고 클릭시 onPress로 category가 바뀌고 카테고리에따라 styledText박스 style이 바뀌게 설정 setCategory("ct")} style={{ backgroundColor: category === "ct" ? "blue" : "#ccc" }} > 그리고 각 category에 따라 각각 다른 내용이 나오게 설정 했다. {todos .filter((t) => { return t.category === category; }) .map((todo) => { return ( {todo.text} setDone(todo.id)}> );
리액트 네이티브 Todolist 메인화면 만들기 기본적으로 Text, TextInput, View등 사용할 태그들은 모두 import해온 후 사용해야 한다. css스타일링 방법엔 inline styling StyleSheet Styled Component Tailwind 등이 있다. 이중에 styled component를 사용했는데 react native에서는 기본 사용했던 styled component가 아니라 emotion native (https://emotion.sh/docs/@emotion/native)를 사용하는게 편하고 호환이 잘 된다. 설치 후 npm install @emotion/react @emotion/native import import styled, { css } from '@em..
리액트 네이티브 처음 설치는 편하게 expo로 시작하는게 좋다. expo에서 project를 만들고 화면에 나와있는 순서대로 하면 좋다. 1. 터미널로 npm install --global eas-cli 를 글로벌로 설치해 주고 2. npx create-expo-app name 원하는 위치에 expo에 만든 프로젝트 이름으로 만들어 준다. 3. init은 파일 내부 터미널에서 사용해주면 편리하게 자동으로 배포가 가능하다. 그 후 프로젝트를 제작하면서 어떻게 나오는지 확인해보려면 터미널에서 npm start혹은 yarn start를 누르면 qr이 나오게 되는데 휴대폰에 expo go설치 후 qr을 찍으면 볼 수 있고 실시간으로 수정사항도 반영된다.
