앱 개발/React-Native

Delete Alert 사용하기 static alert ( title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions, ); - title : 제목 - message : 메세지 - buttons : 버튼 설정하는데, array 형식으로 저장됨 - options : 다양한 옵션들이 있다. >> 자세한 내용은 공식문서 참조 https://reactnative.dev/docs/alert#alertbutton Alert · React Native Launches an alert dialog with the specified title and message. reactnative.dev Alert.alert("Delete To ..

Persist AsyncStorage 설치 expo install @react-native-async-storage/async-storage AsyncStorage 사용 import AsyncStorage from "@react-native-async-storage/async-storage"; ... const saveToDos = async (toSave) => { await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave)); }; const loadToDos = async () => { const s = await AsyncStorage.getItem(STORAGE_KEY); s !== null ? setToDos(JSON.parse(s)) : n..

Paint To Dos Object.keys() {Object.keys(toDos).map((key) => ( {toDos[key].text} ))} - toDos는 Object형태로 저장되어 있고, todo list를 등록할 때의 시간을 key값으로 갖는다. Ex) toDos = { 220128111111 : {"Record", work: true}, 220128222222 : {"Santorini", work: false}} - 여기서 Object.keys(toDos) = [220128111111, 220128222222] 이렇게 배열로 생성되고 앞에 했던 것처럼 [].map 형태를 쓸 수 있다. (글로 설명하려니 어렵네;) 전체 소스코드 (App.js) import { StatusBar } from..

Todos 입력한 데이터 저장하기 ... const onChangeText = (payload) => setText(payload); /// 추가 const [toDos, setToDos] = useState({}); const addToDo = () => { if (text === "") { return; } const newToDos = Object.assign({}, toDos, { [Date.now()]: { text, work: working }, }); setToDos(newToDos); setText(""); }; ... - addToDo 메서드 추가, TextInput에서 submit과 returnKeyType을 "done" 으로 바꿈 Object.assign const newToDos =..

TextInput TextInput 추가하기 (전체 소스코드) (App.js) import { StatusBar } from "expo-status-bar"; import { useState } from "react"; import { StyleSheet, Text, View, TouchableOpacity, TextInput, } from "react-native"; import { theme } from "./colors"; export default function App() { const [working, setWorking] = useState(true); const [text, setText] = useState(""); const travel = () => setWorking(false); ..

Introduction 프로젝트 생성 expo init (프로젝트명) --npm expo init WorkHardTravelHardApp --npm Touchables 헤더 만들기 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, TouchableOpacity, } from "react-native"; import { theme } from "./colors"; export default function App() { return ( Work Travel ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: theme.bg, pa..